/* ============================================================
   CloudCaive canonical theme — the single source of truth.
   Colour and type extracted from /roadmap (the reference page,
   per the 2026-07-11 rebrand). Every page links this file BEFORE
   its local <style>; page styles consume tokens only. Changing a
   value here re-themes the whole site — do not fork tokens into
   pages again. STYLE.md §10 records the canon.
   ============================================================ */
:root{
  /* palette — extracted verbatim from roadmap.html */
  --foundation:#0d1f2d;
  --cave:#1a3a4a;
  --primary:#1e6e7e;
  --active:#2a9db5;
  --mid:#5bbdd1;
  --light:#a8dce8;
  --surface:#d4eff5;
  --gold:#c8973a;
  --gold-light:#e8b96a;
  --gold-pale:#f5e4c0;
  --warm-white:#f5f0e8;
  --white:#ffffff;
  --slate-50:#f0f4f6;
  --slate-100:#dce8ed;
  --slate-300:#8fb3c0;
  --slate-500:#4a7080;
  --slate-700:#2a4a58;
  --text-primary:#0d1f2d;
  --text-sec:#2a4a58;
  --text-muted:#5a7a88;
  --success:#2a7a50;

  /* dark-surface tokens — the navy that replaced the old forest green.
     bg + grid + translucent card/border are roadmap's exact dark-section
     values; the -solid steps are white overlaid on --dark-bg at 3/5/9/12%
     (the same technique roadmap's rgba cards use), for app surfaces that
     need opaque fills. */
  --dark-bg:#0d1f2d;
  --dark-grid:rgba(168,220,232,.035);
  --dark-card:rgba(255,255,255,.04);
  --dark-border:rgba(255,255,255,.09);
  --dark-border-accent:rgba(42,157,181,.15);
  --dark-ink:#dce8ed;
  --dark-muted:#8fb3c0;
  --dark-deep:#081420;      /* code/terminal wells: one step below bg */
  --dark-card-solid:#142633; /* 3% */
  --dark-fill:#192a38;       /* 5% */
  --dark-sel:#233340;        /* 9% */
  --dark-line:#2a3a46;       /* 12% */

  /* Labs accent set — deliberately unchanged by the migration */
  --lab-gold:#e0b450;
  --lab-gold-dim:#a8843a;
  --lab-turq:#3ecfb2;
  --lab-turq-dim:#2a8f7c;
  --lab-red:#e2695f;
  --lab-amber:#e8b34b;

  /* brand cube tokens — the mark's ONLY colours (assets/brand/mark.svg).
     SVGs used as <img>/favicon can't read CSS vars, so the brand files carry
     these hex values literally with a comment naming each token; change a
     value here AND regenerate the assets (scripts/export-brand.py). */
  --brand-gold-top:#e8922a;
  --brand-gold-left:#7a5010;
  --brand-gold-right:#a86e18;
  --brand-gold-edge:#f5b050;
  --brand-teal-top:#00c4b0;
  --brand-teal-left:#005e56;
  --brand-teal-right:#008578;
  --brand-teal-mid:#007068;
  --brand-teal-edge:#4de8d8;

  /* legacy alias: anything that themed on the old forest token now gets navy */
  --forest:var(--dark-bg);

  /* type — canonical stacks (body is Inter, per /roadmap) */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* back-compat names used across existing page CSS */
  --font:var(--font-body);
  --display:var(--font-display);
  --mono:var(--font-mono);

  /* radii / shadows / motion */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-pill:9999px;
  --shadow-sm:0 1px 4px rgba(13,31,45,.08);
  --shadow-md:0 4px 20px rgba(13,31,45,.11);
  --shadow-lg:0 10px 40px rgba(13,31,45,.15);
  --shadow-gold:0 4px 24px rgba(200,151,58,.28);
  --t:all 0.18s ease;
}

/* ============================================================
   Canonical type utilities — USE THESE, do not hand-roll copies.
   Every display heading, eyebrow and lede on every page composes one of:
     .display-hero     h1, page hero (homepage, /roadmap)
     .display-page     h1, secondary-page hero (legal, welcome, /learn)
     .display-section  h2, section titles
     .display-card     h3/h2 inside cards and inner blocks
     .display-closer   the homepage closing-CTA h2 (one per site)
     .eyebrow          uppercase gold label with the dash prefix
     .lede             body intro paragraph
     .accent-gold-italic  the ONE promise phrase inside a heading
   Pages add layout-only companions (colour, margin, max-width) in their
   local class; type metrics (family/size/weight/line-height/tracking)
   live ONLY here. A new scale needs a new sanctioned utility here plus a
   line in STYLE.md §10 — never a local clamp(). (typography-canon pass)
   Display treatment (Playfair) is for h1/h2 ONLY and never below 24px:
   the clamp floors bake that in structurally. The brand wordmark
   (nav/header logo) is a logo, not typography — it is the one exemption.
   ============================================================ */
.display-hero{     /* h1: roadmap .rm-hero h1 */
  font-family:var(--font-display);font-weight:800;letter-spacing:-0.5px;
  font-size:clamp(32px,5vw,56px);line-height:1.12;
}
.display-page{     /* h1 on secondary pages: legal, welcome, learn articles */
  font-family:var(--font-display);font-weight:800;letter-spacing:-0.5px;
  font-size:clamp(30px,4.5vw,46px);line-height:1.15;
}
.display-section{  /* h2: floors at 24px — Playfair cannot go below */
  font-family:var(--font-display);font-weight:800;letter-spacing:-0.5px;
  font-size:clamp(24px,3.5vw,44px);line-height:1.1;
}
.display-card,     /* h3/h2 inside cards and inner blocks; same 24px floor */
.article-body h2{  /* generated long-form bodies stay PLAIN semantic tags
                      (<p>/<h2>/<h3>… per the /learn-page contract), so the
                      canonical scope styles them here — same metrics, one rule */
  font-family:var(--font-display);font-weight:800;letter-spacing:-0.4px;
  font-size:clamp(24px,3vw,32px);line-height:1.2;
}
.display-closer{   /* the homepage closing-CTA h2 — the big finisher; one per site */
  font-family:var(--font-display);font-weight:800;letter-spacing:-1px;
  font-size:clamp(36px,5vw,68px);line-height:1.02;
}
.eyebrow{          /* uppercase gold label with the dash prefix */
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:'';display:inline-block;width:20px;height:1.5px;background:var(--gold)}
.lede{             /* body intro: roadmap .rm-hero .sub */
  font-family:var(--font-body);font-size:17px;line-height:1.75;
}
.accent-gold-italic{ /* at most ONE phrase per heading — the promise */
  color:var(--gold);font-style:italic;
}

/* ============================================================
   THEME SYSTEM — Appearance: System / Dark / Light  (2026-07-13 scope fix)
   The theme is an APP feature: it applies only inside Labs, whose <html>
   carries class="app-labs", and the picker lives in the signed-in header.
   Marketing pages keep the original design in every OS mode and never
   remap — their navy sections and light surfaces are the brand, not a
   theme (founder decision, 2026-07-13).

   <html class="app-labs" data-theme="dark|light"> swaps the SAME tokens;
   no attribute = System (the prefers-color-scheme block below mirrors the
   light values). Persisted as localStorage "cc:theme", applied before
   first paint by the inline boot script. The brand mark's cube colours
   (--brand-*) never re-theme (STYLE.md, Brand lockups).
   ============================================================ */
:root{
  /* text-role accents: gold/turquoise AS TEXT. Fills/buttons keep --gold /
     --lab-gold / --lab-turq unchanged; only text swaps per theme so light
     mode passes WCAG AA (raw gold on near-white is ~2.6:1 and fails). */
  --gold-accent:#e0b450;
  --turq-accent:#3ecfb2;
  /* marketing card surfaces (kept as a named token; marketing never
     re-themes, so this is constant) */
  --card-bg:#ffffff;
}

/* ---- LIGHT app values (explicit choice) — Labs only ---- */
html.app-labs[data-theme="light"]{
  --dark-bg:#eef3f6;
  --dark-grid:rgba(13,31,45,.05);
  --dark-card:rgba(13,31,45,.03);
  --dark-border:rgba(13,31,45,.12);
  --dark-border-accent:rgba(30,110,126,.3);
  --dark-ink:#182b37;          /* 12.6:1 on --dark-bg */
  --dark-muted:#43606e;        /* 5.6:1 */
  --dark-deep:#e3ebf1;
  --dark-card-solid:#ffffff;
  --dark-fill:#e4ecf1;
  --dark-sel:#d6e2ea;
  --dark-line:#c3d3dd;
  --gold-accent:#7d5a10;       /* 5.6:1 on --dark-bg */
  --turq-accent:#0b6b59;       /* 5.9:1 */
}
/* ---- System mode mirrors the same values — Labs only ---- */
@media (prefers-color-scheme: light){
  html.app-labs:not([data-theme]){
    --dark-bg:#eef3f6;
    --dark-grid:rgba(13,31,45,.05);
    --dark-card:rgba(13,31,45,.03);
    --dark-border:rgba(13,31,45,.12);
    --dark-border-accent:rgba(30,110,126,.3);
    --dark-ink:#182b37;
    --dark-muted:#43606e;
    --dark-deep:#e3ebf1;
    --dark-card-solid:#ffffff;
    --dark-fill:#e4ecf1;
    --dark-sel:#d6e2ea;
    --dark-line:#c3d3dd;
    --gold-accent:#7d5a10;
    --turq-accent:#0b6b59;
  }
}
/* Explicit dark needs no block: the :root values above ARE the dark app. */

/* ---- Reduce motion (user setting) — same suppression as the OS media
   query, driven by <html data-reduced-motion="true"> (localStorage
   "cc:motion", applied by the same boot script; applies on every page —
   it's an accessibility setting, not a theme). ---- */
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}