/* Angler — design tokens.
   Values are lifted from the shipping app (frontend/src/index.css, onboarding.css,
   tour.css, NotchShell.tsx). Where app and old marketing HTML disagreed, the app won.
   Do not invent tokens here; if a value isn't in this file, it isn't in the system. */

:root {
  /* ---- Cream side (the page below the hero) ---- */
  --lake:        #195c6a;
  --lake-dark:   #134852;
  --lake-deep:   #0e363e;
  --vellum:      #faf3e3;
  --vellum-2:    #f3ead6;
  --parchment:   #efe9dd;
  --paper:       #fdfbf6;
  --ink:         #191612;
  --ink-soft:    #3a352e;
  --muted:       #5c5c5c;
  /* HAIRLINES AND RULES ONLY. 2.3:1 on cream — never use as text. */
  --faint:       #a49d8f;
  --line:        #ddd4c2;
  --line-soft:   #e7dfce;
  --dawn:        #c6a050;
  /* Darkened from the app's #a9843a. As 10.5px letterspaced caps that measured
     2.5–3.4:1 on cream; this clears 4.6:1 on --vellum. Eyebrow text + focus ring. */
  --dawn-deep:   #7a5d24;
  --moss:        #4d7a4d;
  --rust:        #9a3f36;
  --terracotta:  #bf6a52;

  /* ---- Product chrome (only when mirroring the main window) ---- */
  --win-bg:      #f5f0e8;
  --win-sidebar: #eee8dc;
  --win-chip:    #eae4d8;
  --win-rule:    #ddd8ce;
  --win-text:    #2c2c2c;
  --win-text-2:  #6b6560;

  /* ---- Dark side: the notch overlay. Verbatim from NotchShell.tsx.
         The pill NEVER animates alpha and has NO backdrop-filter — a real
         hardware notch is opaque. Only the toast is blurred. ---- */
  --pill:            rgba(0, 0, 0, 0.93);
  --notch-surface:   rgba(255, 255, 255, 0.06);
  --notch-field:     rgba(255, 255, 255, 0.08);
  --notch-border:    rgba(255, 255, 255, 0.10);
  --notch-hairline:  rgba(255, 255, 255, 0.08);
  --notch-text:      rgba(255, 255, 255, 0.95);
  --notch-text-2:    rgba(255, 255, 255, 0.50);
  --notch-text-3:    rgba(255, 255, 255, 0.30);

  /* ---- Presence cue (the always-on glow; distinct from --lake) ---- */
  --presence-lift:   rgb(60 140 158);
  --presence-bright: rgb(104 186 205);
  --presence-glow:   rgb(126 206 230);
  --presence-hot:    rgb(150 220 240);

  /* ---- File-type palette. Load-bearing: these read as the product. ---- */
  --ft-pptx: #d85a30;
  --ft-xlsx: #1d9e75;
  --ft-docx: #378add;
  --ft-pdf:  #e74c3c;
  --ft-md:   #6e57d2;

  /* ---- Halftone lake, sampled from the source plate ---- */
  /* Sampled from the plate (assets/img/palette.json), then lifted slightly so the
     CSS sky reads brighter than the plate's masked top edge instead of matching it. */
  --sky-top:  #cdc3ab;
  --sky-mid:  #c1b395;
  --haze:     #a4957c;
  --ridge:    #776e5b;
  --water:    #6d614e;

  /* ---- Type ---- */
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---- Motion. Four curves. Everything on the page uses one of these. ---- */
  --ease-open:  cubic-bezier(0.34, 1.26, 0.64, 1);   /* 380ms — overshoot/settle */
  --ease-close: cubic-bezier(0.32, 0.72, 0.35, 1);   /* 280ms — no overshoot */
  --ease-house: cubic-bezier(0.22, 1, 0.36, 1);      /* .3–.5s — cream-side default */
  --ease-nav:   cubic-bezier(0.4, 0, 0.2, 1);        /* 150ms — hover/color only */

  /* ---- Radii. TWO values, plus one exception.
     Codex runs 6.08px across 22 elements — including its 907x510 and 1100x1466
     objects — and reserves pills for buttons. Four graded panel radii was the
     proportion running backwards: our biggest mocks carried twice Codex's radius on
     objects larger than anything it rounds. The old names survive as aliases so the
     54 existing call sites did not all have to be repointed. ---- */
  --r-card:   6px;
  --r-field:  6px;   /* was 8px  */
  --r-panel:  6px;   /* was 10px */
  --r-large:  6px;   /* was 12px */
  --r-cta:    999px; /* was 11px — buttons are pills, as in Codex, Cursor and x.ai */
  --r-pill:   999px;
  --r-screen: 12px;  /* the ONE exception: a thing depicting a physical screen */

  /* ---- Shadows: teal-tinted lifts, not grey drops ---- */
  --sh-cta:      0 6px 16px -8px rgba(25, 92, 106, 0.7);
  --sh-selected: 0 3px 0 -1px rgba(25, 92, 106, 0.13);
  --sh-ring:     0 0 0 4px rgba(198, 160, 80, 0.22);
  --sh-panel:    0 1px 2px rgba(25, 22, 18, 0.04), 0 8px 28px -12px rgba(25, 22, 18, 0.14);
  --sh-float:    0 24px 70px -28px rgba(20, 30, 34, 0.55);

  /* ---- Layout. Codex shares one 907px column across 40 elements; we had eight
     different content widths and nothing lined up across a section boundary. ---- */
  --page:   960px;
  --gutter: 32px;

  /* ---- Section rhythm. Was clamp(88,11vw,168) = 317px between section contents,
     while unrelated ideas *inside* a section sat 74px apart — the air was inverted.
     Codex runs a flat ~120px between top-level blocks and spends the rest inside. ---- */
  --sec-y: clamp(72px, 8vw, 120px);
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --sec-y: clamp(64px, 13vw, 96px); }
}