/* ═══════════════════════════════════════════════════════════════════════
 *  design-tokens.css · one place where the software decides how it looks
 *  ─────────────────────────────────────────────────────────────────────
 *  Every screen used to invent its own purple, its own corner radius and
 *  its own shadow. That is what makes an interface look assembled rather
 *  than designed, and it is why this file exists before any screen does.
 *
 *  Nothing here draws anything. It only names decisions, so that a
 *  screen can spend its CSS on layout instead of on re-deciding what
 *  the brand colour is.
 *
 *  ── The colour ───────────────────────────────────────────────────
 *  Muted cherry purple. The key word is muted: at full saturation a
 *  purple this dark turns into a casino, and the whole point is a tool
 *  somebody stares at for an eight-hour shift. So the brand appears in
 *  three places and nowhere else — the primary action, the focus ring,
 *  and the thin accent that says "you are here". Everything else is
 *  ink on paper.
 *
 *  A screen that uses the brand colour for six different things has no
 *  brand colour: it has a background.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────────────────── */
  --cherry:        #7a3b5d;   /* the one action that matters on a screen */
  --cherry-deep:   #5f2c48;   /* the same, pressed */
  --cherry-soft:   #f7f0f4;   /* a tint to sit behind it, almost white */
  --cherry-edge:   #e7d6df;   /* the border of that tint */
  /* The focus ring gets its own token and its own alpha: it has to be
     visible on white AND on the tint, and a ring that borrows the
     button colour disappears on the button. */
  --cherry-ring:   rgba(122, 59, 93, .28);

  /* ── Ink and paper ──────────────────────────────────────────────── */
  --ink:           #16141a;   /* headings, numbers, anything that matters */
  --ink-soft:      #5d5763;   /* everything that explains something */
  --ink-faint:     #8e8894;   /* placeholders, timestamps, units */
  --paper:         #ffffff;
  --paper-sunk:    #faf8fa;   /* the page behind the cards */
  --line:          #ece8ee;   /* every border in the product is this */

  /* ── State ──────────────────────────────────────────────────────── */
  /* Deliberately desaturated to sit next to the cherry without
     shouting over it. A pure red next to a muted purple reads as an
     error even when it is only a total. */
  --good:          #2f6b4f;
  --warn:          #8a6a25;
  --bad:           #9b3b3b;

  /* ── Radius ─────────────────────────────────────────────────────── */
  --r-s:            8px;   /* a chip, a tag */
  --r:             12px;   /* a button, a field */
  --r-l:           18px;   /* a card, a panel */
  --r-round:      999px;   /* a floating button, a pill */

  /* ── Elevation ──────────────────────────────────────────────────────
     Three steps and no more. Soft and wide rather than dark and tight:
     a shadow you can see the edge of looks like a sticker. */
  --lift-1: 0 1px 2px rgba(22, 20, 26, .04),
            0 1px 3px rgba(22, 20, 26, .06);
  --lift-2: 0 2px 6px rgba(22, 20, 26, .05),
            0 8px 24px rgba(22, 20, 26, .07);
  /* Only floating buttons get this one. If a card uses it, the floating
     button stops looking like it floats. */
  --lift-float: 0 4px 12px rgba(22, 20, 26, .08),
                0 12px 32px rgba(95, 44, 72, .16);

  /* ── Motion ─────────────────────────────────────────────────────────
     Short and unanimated-looking. 140ms is the number at which a
     transition stops being noticed and starts being felt, which is the
     goal: nothing on this screen should ask to be watched. */
  --t-fast:        90ms;
  --t:            140ms;
  --t-slow:       220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Type ───────────────────────────────────────────────────────────
     Six steps. Every size in the product is one of these, because a
     scale with eleven steps is not a scale, it is whatever each screen
     felt like. */
  --txt-xs:        12px;
  --txt-s:         13px;
  --txt:           14px;   /* body, and by far the most used */
  --txt-l:         16px;
  --tit-s:         20px;
  --tit:           26px;
  --tit-l:         34px;

  /* ── Space ──────────────────────────────────────────────────────── */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:          12px;
  --sp-4:          16px;
  --sp-5:          24px;
  --sp-6:          32px;
  --sp-7:          48px;

  /* The smallest thing a finger is allowed to have to hit. Not a
     suggestion: this software runs on tablets with wet hands on them. */
  --touch:         44px;
}

/* Reduced motion is not a preference to honour half way: if somebody
   asked the operating system to stop moving things, nothing here moves. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}