/* ============================================================
   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);

  /* ── Reading ladder ────────────────────────────────────────
     The long-form pages had ten display sizes and five body
     sizes, every one a bespoke clamp with endpoints nobody
     chose twice: 32/62, 27/37, 30/46, 38/66, 19/25, 28/40. Two
     of them landed 0.4px apart, which is not a step, it is an
     accident with a decimal point.

     Six steps for anything set in the display face, two for
     anything read as a sentence. An essay uses the top of the
     ladder, a guide starts two rungs down. If a size is not
     here, the design is wrong, not the ladder. */
  --r-display: clamp(66px, 9vw, 138px);  /* an essay title, and nothing else */
  --r-1: clamp(38px, 4.8vw, 66px);       /* essay section heading */
  --r-2: clamp(32px, 3.9vw, 56px);       /* guide title */
  --r-3: clamp(26px, 3.0vw, 42px);       /* opening line, pull quote, explainer */
  --r-4: clamp(21px, 2.2vw, 28px);       /* guide section heading */
  --r-5: clamp(18px, 1.6vw, 22px);       /* guide quote, closing cards */
  --r-read:    17px;                     /* anything read as a sentence */
  --r-read-sm: 15px;                     /* the same, in a smaller box */
  --r-display-s: clamp(62px, 20vw, 92px);/* an essay title on a phone */

  /* ── 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 */
}

/* ── Sixteen pixels, on anything you can type into ───────────────────────────
   iOS zooms the whole page in when you focus a field whose text is smaller
   than sixteen pixels, and it does not zoom back out when you leave. One tap
   on the search box and the site stayed magnified for the rest of the visit.

   Every field on the site was thirteen, fourteen or fifteen. This is the fix
   at the cause. Turning zoom off in the viewport tag is not: Safari has
   ignored `user-scalable=no` since iOS 10, so it would not have helped here,
   and where it is still honoured it stops people enlarging a page they cannot
   read.

   Only fields you type into. A slider has no text and no zoom to trigger. */
@media (pointer: coarse) {
  /* `:is()` rather than three selectors in a list: a bare `textarea` is one
     tag and loses to any rule with a class in it, which is most of them, so
     the boxes stayed at fourteen while the inputs beside them moved. Inside
     `:is()` all three carry the weight of the three `:not()`s, and win. */
  :is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;
  }
}