/* ============================================================
   SLATE: token contract
   Every value here is declared in DESIGN.md. Nothing is invented
   at the CSS layer. If a value is missing, it goes in DESIGN.md
   first, then here.

   Direction: a milled metal card inside a block of polished
   obsidian, lit so colored light bends through the glass and
   bleeds across the dark.
   ============================================================ */

:root {
  /* --- The material --------------------------------------- */
  /* Below the page ground. Product register only: the dashboard and
     login ground fall to this at the edges, and panels cut into that
     ground are drawn from it. The marketing page never uses it. */
  --obsidian-0:    oklch(9.0% 0.008 265);
  --obsidian:      oklch(13.0% 0.010 265);
  --obsidian-2:    oklch(17.0% 0.012 265);
  --obsidian-3:    oklch(23.0% 0.014 265);
  --facet-edge:    oklch(42.0% 0.016 265);
  --on-obsidian:   oklch(96.0% 0.005 265);
  --on-obsidian-70: oklch(74.0% 0.008 265);

  /* Brushed metal, the card face only. Three stops of one milled
     surface: the raking highlight, the shadowed body, and the
     turn back toward the light. Not page material. */
  --metal-1: oklch(38% 0.012 265);
  --metal-2: oklch(26% 0.010 265);
  --metal-3: oklch(32% 0.011 265);

  /* --- The light ------------------------------------------ */
  --light-save:  oklch(80.0% 0.145 168);
  --light-tax:   oklch(74.0% 0.150 35);
  --light-spend: oklch(82.0% 0.130 205);

  /* Live light. ScrollTrigger writes these; the caustics, edge
     glows, blooms and the canvas tint all read from them, so one
     assignment moves the whole optical system at once. */
  --light: var(--light-spend);

  /* --- Type ----------------------------------------------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-num:     "Spline Sans Mono", ui-monospace, monospace;

  --t-hero: clamp(3rem, 9vw, 11rem);
  --t-h2:   clamp(2.25rem, 5.5vw, 6rem);
  --t-h3:   clamp(1.5rem, 2.4vw, 2.25rem);
  --t-num:  clamp(2.75rem, 7.5vw, 8rem);
  --t-lede: clamp(1.0625rem, 1.3vw, 1.375rem);
  --t-body: clamp(1rem, 1vw, 1.0625rem);
  --t-meta: 0.75rem;

  /* --- Space ---------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 160px;

  --section-y: clamp(120px, 14vw, 240px);
  --gut: clamp(20px, 5vw, 72px);
  --max: min(1440px, 92vw);
  --col-gap: clamp(16px, 2vw, 32px);
  --header-h: 68px;

  /* --- Curvature. Structural, not decoration. ------------- */
  --r-s: 12px;
  --r-m: 22px;
  --r-l: 36px;
  --r-xl: 56px;

  /* --- Motion --------------------------------------------- */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --e-out-q: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 160ms;
  --d-base: 400ms;
  --d-slow: 900ms;

  /* Entrance motion. Longer than --d-base because a reveal travels
     further than a hover does, and slower reads as deliberate rather
     than nervous. */
  --d-enter: 700ms;
  --d-route: 160ms;

  /* --- Product density tier -------------------------------
     The dashboard is a product surface, not a marketing one.
     176px display type and 240px section padding are brand
     register tools and do not belong behind a login. */
  --t-app-hero: clamp(2rem, 4vw, 3.25rem);
  --t-app-h2: 1.5rem;
  --t-app-body: 0.9375rem;
  --t-app-meta: 0.75rem;
  --r-app: var(--r-m);
  --app-gutter: clamp(16px, 3vw, 32px);
  --app-max: 1180px;
}

/* Registering --light as a real color makes it interpolate.
   Without this, gradients that read from it snap between
   destinations instead of bleeding, because gradient images do
   not transition on their own. */
@property --light {
  syntax: "<color>";
  inherits: true;
  /* The one literal colour in the file. @property cannot take a var() as
     an initial-value, so this has to repeat --light-spend by hand. If that
     token changes, change this too. */
  initial-value: #5FD3EE;
}