/* ============================================================
   melis.ai — design tokens
   The single source of truth. Nothing hardcodes a colour, size,
   font or space. If a value isn't here, it isn't allowed.

   First law: token efficiency. Fewer values, fewer elements,
   less code. That is not a constraint on the design — it is
   the design. Light files, calm screens, lower footprint.
   ============================================================ */

:root {
  /* ── Surface ───────────────────────────────────────────────
     Five steps, darkest to lightest. Never invent a sixth. */
  --bg:         #080808;   /* page */
  --rail:       #0c0c0d;   /* primary rail */
  --rail-2:     #101011;   /* secondary rail */
  --surface:    #121213;   /* raised: buttons, chips */
  --surface-2:  #181819;   /* card wells, empty art */

  /* ── Ink ───────────────────────────────────────────────────
     One warm off-white at three strengths. Hierarchy comes
     from opacity, never from a different hue. */
  --text:    #e8e3d8;                    /* primary */
  --text-2:  rgba(232, 227, 216, .64);   /* secondary, body copy */
  --text-3:  rgba(232, 227, 216, .52);   /* accessible meta, labels, counts */

  /* ── Line ──────────────────────────────────────────────────
     Hairlines only. A border is a whisper, not a box. */
  --line:        rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .13);

  /* ── Accent ────────────────────────────────────────────────
     Violet is the brand and carries interaction. Teal and amber
     are signals only — status and caution. Never decoration. */
  --violet:      #8c69d8;
  --violet-pale: #b99aef;
  --violet-deep: #60419c;
  --teal:        #76c8ba;
  --amber:       #e2ae65;
  --danger:      #ef6b6b;

  /* ── Type ──────────────────────────────────────────────────
     Three faces, three jobs, no overlap.
     display — headlines and any number a person feels
     body    — anything read as a sentence
     mono    — anything scanned: labels, counts, money, meta */
  --display: "Cormorant Garamond", Georgia, serif;
  --body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Type scale ────────────────────────────────────────────
     Seven sizes. If a size isn't here, the design is wrong,
     not the scale. */
  /* Type scale v2 — on trial in the shop, courses and the specialists.
     The page was carrying thirty-six distinct sizes; these are steps, and
     the rule is that nothing read as a sentence goes below --t-support. */
  --t-label:    10px;
  --t-label-s:  8.5px;
  --t-support:  13px;
  --t-body-2:   15px;
  --t-lede-2:   17px;
  --t-micro: 8px;    /* badges, kickers */
  --t-meta:  9px;    /* counts, breadcrumbs, footers */
  --t-small: 11px;   /* nav, controls */
  --t-body:  13px;   /* card copy */
  --t-lede:  15px;   /* hero and essay body */
  --t-title: 26px;   /* section headings */
  --t-hero:  clamp(44px, 4.6vw, 68px);

  /* ── Money ─────────────────────────────────────────────────
     One rule, everywhere it appears. Price is scanned, not read,
     so it is always mono. Only the size changes with weight of
     the moment: a card, a line item, a total. */
  --money-face: var(--mono);
  --money-sm:   var(--t-body);   /* card and line item */
  --money-lg:   18px;            /* bag total, drawer price */

  /* ── Space ─────────────────────────────────────────────────
     Nine steps. Space is the luxury signal — when unsure,
     go up one step, never invent a between. */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px;

  /* ── Structure ─────────────────────────────────────────────
     One icon column width, shared by the mark, every nav icon
     and the status dot, so a single line runs down the rail. */
  --icon-col: 64px;
  --rail-open: 220px;
  --radius: 4px;
  --radius-sm: 2px;
  --hairline: 1px;

  /* ── Motion ────────────────────────────────────────────────
     One easing. One long duration for panels, one short for
     everything else. Nothing should outlast the gesture. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-slow: 460ms;   /* sliding panels */
  --dur:      300ms;   /* reveals */
  --dur-fast: 140ms;   /* exits, hovers */
}