/* ============================================================================
   Clier landing page — V2 · token layer
   ----------------------------------------------------------------------------
   Every colour, radius, duration and type decision on the page. Nothing in
   landing.css is a literal; if a value is not here, it does not exist.

   Mirrors the Clier design system's token files (colors · typography ·
   geometry · motion · semantic · base · dark) reduced to what this page uses.
   Where the marketing page needs a token the platform doesn't have, it is
   marked MARKETING and explained.
   ========================================================================== */

:root{
  /* ── Neutrals ────────────────────────────────────────────────────────────
     TWO neutral fills only (--paper, --card) above the ground. A third grey
     is a smell. #ffffff is not a Clier surface. */
  --base:#f4f2ec;        /* body, under the field */
  --paper:#f6f5f1;       /* flat surfaces, sheets */
  --card:#fdfcfa;        /* cards, panels — the frost derives from this */
  --ink:#14130f;         /* type; the one near-black */
  --sub:#57544c;         /* secondary type · 6.7:1 on paper */
  --faint:#918d83;       /* mono meta ONLY — fails body copy */
  --line:#e4e0d6;        /* hairlines */

  /* ── Accent ──────────────────────────────────────────────────────────────
     Cobalt is reserved: links, the focus ring, and eyebrow labels that mark
     an outbound connection. Never a decorative fill. */
  --acc:#1f2bcf;
  --acc-hover:#161ea0;

  /* ── Marketing fills ────────────────────────────────────────────────────*/
  --straw:#eee4cd;
  --straw-ink:#6b5a1c;

  /* ── Six card tints · face / deep / ink ─────────────────────────────────
     A TINT MEANS CATEGORY, NEVER STATUS. Type inside a tinted face uses that
     family's ink and steps down with opacity — never --sub, never --line. */
  --peach:#f4e7d4;  --peach-deep:#ead8be;  --peach-ink:#6f4e0d;
  --ice:#dee4f2;    --ice-deep:#cbd4ea;    --ice-ink:#2f4176;
  --mint:#dfeae0;   --mint-deep:#cddcd0;   --mint-ink:#2f5b3f;
  --lilac:#e6e0ef;  --lilac-deep:#d7cfe4;  --lilac-ink:#4a3a6a;
  --rose:#f2dedb;   --rose-deep:#e7cbc6;   --rose-ink:#7a2e22;
  --sage:#e3e7da;   --sage-deep:#d2d8c5;   --sage-ink:#3f4a2c;

  /* ── Recurring alphas ───────────────────────────────────────────────────*/
  --separator:rgba(20,19,15,.08);            /* rules inside a card */
  --sep-strong:rgba(20,19,15,.14);           /* the header hairline */
  --hair-chrome:rgba(20,19,15,.05);          /* hover wash, control grounds */
  --panel-fill:rgba(253,252,250,.62);        /* translucent panel on field */
  --panel-fill-strong:rgba(253,252,250,.86); /* the same, one step up */
  --frame-ring:rgba(20,19,15,.10);           /* an outline, never a shadow */
  --track:rgba(20,19,15,.12);                /* meters and progress tracks */

  /* ── Type on a fixed near-black ground ──────────────────────────────────
     MARKETING. Scoped to .ink (see landing.css) and deliberately NOT
     theme-aware: the ink blocks are #14130f in both themes, exactly like the
     platform's brand strip, so their type is fixed alphas of paper. */
  --on-1:rgba(246,245,241,.78);
  --on-2:rgba(246,245,241,.72);
  --on-3:rgba(246,245,241,.62);
  --on-rule:rgba(246,245,241,.22);
  --on-track:rgba(246,245,241,.16);
  --on-face:#f6f5f1;       /* a paper element sitting ON an ink block */
  --on-face-ink:#14130f;   /* and its type */

  /* ── The field ──────────────────────────────────────────────────────────
     Three radial corners, each fading to zero by ~60%. FIXED — it never
     scrolls, and it is never a two-stop linear gradient. */
  --field-warm:
    radial-gradient(1300px 780px at 0% -10%,#f6e3c6 0,rgba(246,227,198,0) 62%),
    radial-gradient(1150px 700px at 100% -4%,#d7e0f6 0,rgba(215,224,246,0) 58%),
    radial-gradient(1250px 900px at 52% 108%,#dcebdd 0,rgba(220,235,221,0) 60%);
  --field-cool:
    radial-gradient(1100px 620px at 2% -8%,rgba(216,224,245,.95) 0,rgba(216,224,245,0) 58%),
    radial-gradient(900px 540px at 98% 4%,rgba(230,222,240,.9) 0,rgba(230,222,240,0) 52%),
    radial-gradient(1000px 700px at 55% 106%,rgba(219,233,235,.9) 0,rgba(219,233,235,0) 56%);
  --bg-fade:.14;         /* the hero still's opacity */
  --bg-sat:.75;          /* and its desaturation */

  /* ── Type · two families, no third ──────────────────────────────────────
     Schibsted Grotesk for everything human, JetBrains Mono for everything
     machine. Serifs belong to the Edition document voice, not to the app. */
  --font-sans:'Schibsted Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --t-eyebrow:500 10px/1 var(--font-mono);   --ls-eyebrow:.18em;
  --t-meta:500 11px/1.4 var(--font-mono);    --ls-meta:.14em;
  --t-label:500 10px/1 var(--font-mono);     --ls-label:.16em;
  --t-ledge:400 10px/1 var(--font-mono);     --ls-ledge:.13em;
  --mono-floor:10px;     /* mono NEVER renders below this */

  /* ── Geometry · a radius is a decision each component makes ─────────────*/
  --r-group:26px;        /* section cards, the ink blocks */
  --r-panel:22px;        /* panels, rows, FAQ items */
  --r-panel-lg:24px;     /* under-layers: the ledge, wide plates */
  --r-input:12px;        /* image crops, small controls */
  --r-pill:999px;        /* buttons, chips, segments */

  --ledge-inset:18px;    /* the ledge's left/right inset under its card */
  --ledge-reveal:33px;   /* how far it peeks below (32–34) */
  --ledge-height:70px;
  --hit:44px;            /* minimum mobile hit target */

  --shell-max:1240px;    /* MARKETING: narrower than the app's 1440 — this is
                            prose, and prose has a measure */
  --shell-gutter:clamp(20px,4vw,34px);

  /* ── Motion · three durations, nothing outside them ─────────────────────*/
  --dur-state:120ms;     /* hover, press, toggle */
  --dur-reveal:180ms;    /* disclosure, chevron, header frost */
  --dur-overlay:240ms;   /* sheets, menus */
  --ease-out:cubic-bezier(.22,.61,.36,1);   /* entering */
  --ease-in:cubic-bezier(.55,.06,.68,.19);  /* leaving */

  /* ── Focus · one ring everywhere ────────────────────────────────────────*/
  --focus-ring:2px solid var(--acc);
  --focus-offset:2px;

  --shadow:none;         /* there are no shadows, including in print */
}

/* ── Dark Wash ────────────────────────────────────────────────────────────
   Designed, not inverted. One switch: [data-theme="dark"] on <html>, set from
   one resolved cookie before render — no @media branch, no per-page setting.
   Three decisions: a warm-neutral near-black ground (never pure black, never
   the retired Console #0b0c0f); surfaces step UP while the ledge steps DOWN;
   and THE TINTS GAIN CHROMA — each family keeps its hue and trades lightness
   for saturation, because a pale face on a dark ground goes to mud. */
[data-theme="dark"]{
  --base:#111110;
  --paper:#191917;
  --card:#212120;
  --ink:#f5f3ed;         /* 15.4:1 on base */
  --sub:#a9a59b;         /* 7.2:1 on paper */
  --faint:#726e65;
  --line:#302f2b;

  --acc:#7d8bff;         /* lifted: same hue, 7.0:1. #1f2bcf is 2.1:1 here. */
  --acc-hover:#9ba6ff;

  --straw:#332b1b;
  --straw-ink:#e7d2a2;

  --peach:#ef9440;  --peach-deep:#c9762a;  --peach-ink:#3a2409;
  --ice:#93b3e4;    --ice-deep:#6e8fc4;    --ice-ink:#0f1c33;
  --mint:#9ed2af;   --mint-deep:#75ab88;   --mint-ink:#0f2417;
  --lilac:#bcaae6;  --lilac-deep:#9585c2;  --lilac-ink:#1d1531;
  --rose:#ef907c;   --rose-deep:#c96c59;   --rose-ink:#3a120a;
  --sage:#c7d19c;   --sage-deep:#a0aa78;   --sage-ink:#1f2410;

  --separator:rgba(242,240,234,.10);
  --sep-strong:rgba(242,240,234,.18);
  --hair-chrome:rgba(242,240,234,.07);
  --panel-fill:rgba(33,33,32,.66);
  --panel-fill-strong:rgba(33,33,32,.88);
  --frame-ring:rgba(242,240,234,.12);
  --track:rgba(242,240,234,.14);

  /* --on-* are NOT redefined: the ink blocks stay near-black in both themes */
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-state:0ms;--dur-reveal:0ms;--dur-overlay:0ms}
}