/* ============================================================
   rawcloser.com — Design Tokens (Phase 7.A.1)

   VALUE REFERENCE: ../RawCloser/frontend/src/styles/tokens.css
   This file does NOT import, symlink, or copy that file. It is an
   independently authored token file for this repo, deriving its
   VALUES from the app's tokens where the brand must match (Log.md
   §1.9). Changes to the app's tokens.css do NOT propagate here —
   any future brand-value change must be re-derived manually against
   this file. See Log.md §1.9 and Description.md §Core Identity & Brand.

   Structure: PRIMITIVES first (kept structurally parallel to the
   app's file — same block shape, same theme selectors — so a future
   manual re-derivation is a diff, not a translation), then SITE
   SEMANTICS (authored for this site, no app equivalent: marketing
   pages are fluid-width and prose-heavy in a way the app's fixed
   desktop window never is).
   ============================================================ */

/* ============================================================
   LAYER 1 — PRIMITIVES (values derived from the app, unchanged)
   ============================================================ */

:root{
  /* Spacing (4px base) — identical scale to the app */
  --space-0:0;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* Radius primitive carried verbatim — the app's only radius token
     with no component-specific binding */
  --radius-pill:999px;

  /* Typography — system font stacks, no @font-face (self-hosted rule
     costs nothing here: these ARE the self-hosted answer) */
  --font-sans:-apple-system,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* Type scale — app's ceiling (4xl/52px) kept as a primitive.
     Site-only sizes above this ceiling are authored in SITE SEMANTICS below. */
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:32px; --text-3xl:40px; --text-4xl:52px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.15; --leading-normal:1.4; --leading-relaxed:1.6;
  --tracking-tight:-0.02em; --tracking-normal:0;

  /* Brand metals (raw — referenced by gradients) */
  --silver:#bababa; --silver-bright:#e9e9eb; --silver-deep:#8e8e93;
  --gold:#f0cd7a;   --gold-bright:#ffd97f;   --gold-deep:#d9a441;

  /* Motion — identical to the app */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:480ms;
  /* --stagger raised 35ms -> 90ms in 7.A.11 so staggered siblings ARRIVE IN
     SEQUENCE rather than all at once — 35ms read as simultaneous. Consumed by
     the hero load fade-up delays and every scroll-reveal's nth-child /
     per-block delay; zeroed under prefers-reduced-motion (base.css). */
  --stagger:90ms;
}

/* ===== LIGHT (default) ===== */
:root,
[data-theme="light"]{
  color-scheme:light;
  --color-bg:#ffffff;
  --color-surface:#f5f5f7;
  --color-surface-2:#fafafa;
  --color-surface-3:#f0f0f0;
  --color-surface-raised:#ffffff;
  --color-border:#e3e3e6;
  --color-border-strong:#d1d1d6;
  --color-text:#1d1d1f;
  --color-text-secondary:#6e6e73;
  --color-text-tertiary:#8e8e93;
  --color-text-inverse:#ffffff;
  --color-fill-selected:#e8e8ed;
  --color-fill-selected-strong:#dcdcdc;
  --color-focus-ring:rgba(0,0,0,.35);
  --color-positive:#2ca24f; --color-negative:#d83a3a; --color-warning:#c98a00;

  --grad-pro:linear-gradient(60deg,#000 0%,var(--silver) 100%);
  --grad-max:linear-gradient(60deg,#000 0%,var(--silver) 50%,var(--gold) 100%);

  --glass-bg:rgba(255,255,255,.6);
  --glass-border:rgba(255,255,255,.5);
  --glass-blur:20px;

  --shadow-sm:0 0 1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.10);
  --shadow-md:0 0 2px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.14);
  --shadow-lg:0 0 3px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.16);
  --shadow-xl:0 0 4px rgba(0,0,0,.08), 0 16px 36px rgba(0,0,0,.20);
}

/* ===== DARK ===== */
[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#1d1d1d;
  --color-surface:#2c2c2e;
  --color-surface-2:#1b1b1b;
  --color-surface-3:#292929;
  --color-surface-raised:#2c2c2e;
  --color-border:#38383a;
  --color-border-strong:#48484a;
  --color-text:#f5f5f7;
  --color-text-secondary:#a1a1a6;
  --color-text-tertiary:#6e6e73;
  --color-text-inverse:#1d1d1f;
  --color-fill-selected:#3a3a3c;
  --color-fill-selected-strong:#3c3c3c;
  --color-focus-ring:rgba(255,255,255,.4);
  --color-positive:#32d362; --color-negative:#ff5a52; --color-warning:#e7a32e;

  /* start lifts off black: no dark-bg logo exists to copy, and #000 is
     invisible on #1c1c1e — same reasoning as the app, carried verbatim */
  --grad-pro:linear-gradient(60deg,#6e6e73 0%,var(--silver-bright) 100%);
  --grad-max:linear-gradient(60deg,#6e6e73 0%,var(--silver-bright) 50%,var(--gold-bright) 100%);

  --glass-bg:rgba(44,44,46,.6);
  --glass-border:rgba(255,255,255,.08);
  --glass-blur:20px;

  --shadow-sm:0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 0 2px rgba(0,0,0,.40), 0 3px 8px rgba(0,0,0,.55);
  --shadow-lg:0 0 3px rgba(0,0,0,.40), 0 8px 20px rgba(0,0,0,.62);
  --shadow-xl:0 0 4px rgba(0,0,0,.40), 0 16px 36px rgba(0,0,0,.68);
}

/* Not carried: --skeleton-base / --skeleton-sheen. No page in this
   sub-phase's scope (or the 7.A.2-4 pages planned after it) fetches
   data asynchronously — landing/pricing/privacy/terms are all static
   markup, so there is no loading state to skeleton. Add these if a
   future sub-phase (waitlist/feedback board, 7.C/7.D) introduces one.

   Not carried: --color-control-fill. It exists in the app to solve a
   Toggle switch's non-text contrast (WCAG SC 1.4.11) against the app's
   surfaces. This sub-phase's theme control is a plain icon button (see
   components.css nav), not a track-style switch — its icon uses
   --color-text, which already carries full text-contrast guarantees.
   No 3:1 non-text fill is needed. If a future sub-phase adds a real
   switch-style control, re-derive a fresh value here against this
   file's own --color-bg / --color-surface-raised and show the computed
   ratio — do not reintroduce the app's #929292 / #777777 by assumption. */

/* ============================================================
   LAYER 2 — SITE SEMANTICS (authored for this site, no app equivalent)
   ============================================================ */

:root{
  /* Fluid type scale, above the app's --text-4xl (52px) ceiling.
     The app is a fixed-width desktop window and never needs type
     larger than 4xl; a marketing hero does, and must shrink on
     mobile viewports where the app's fixed window never renders.
     rem-based clamp() so the fluid step still respects a visitor's
     browser font-size setting — a pure vw value would not.
     Interpolated between a 375px and 1440px viewport. */
  --text-5xl:clamp(2rem, 1.3rem + 3.01vw, 4rem);     /* ~32px -> 64px */
  --text-6xl:clamp(2.5rem, 1.444rem + 4.51vw, 5.5rem); /* ~40px -> 88px */

  /* Fluid section rhythm. The app's largest spacing step (--space-9,
     96px) is a fixed value inside a fixed window. Landing-page section
     padding needs a larger ceiling (160px on a tall desktop viewport)
     and must shrink well below the app's ceiling on mobile, where
     96px of empty padding above and below a section reads as broken.
     Same interpolation window (375px -> 1440px) as the type scale. */
  --space-section-y:clamp(4rem, 1.89rem + 9vw, 10rem); /* ~64px -> 160px */

  /* Prose measure + page container. The app has no prose (no body of
     running text anywhere in its UI) and no page-width concept (fixed
     window). The legal pages (privacy/terms) are nothing BUT prose,
     and every marketing page needs a max-width so text doesn't stretch
     edge-to-edge on wide monitors. */
  --measure-prose:65ch;
  --container-max:75rem;                          /* 1200px @ 16px root */
  --container-pad-x:clamp(1.5rem, 4vw, 3rem);      /* 24px -> 48px gutters */

  /* Radius scale. The app's semantic radius tokens (--radius-card,
     --radius-button, --radius-sidebar, etc.) describe app-only
     components (sidebar, modal, calendar grid) this site doesn't have,
     so none of those names are carried over. The CONCENTRIC PRINCIPLE
     they encode is carried: R_outer = R_inner + gap, so a rounded
     element nested inside another rounded element reads as concentric
     rather than visually clashing. The app's three raw values
     (8 / 10 / 20) are carried and renamed as a plain small/medium/large
     scale — components.css picks the right step per component and
     applies the concentric gap itself via padding, since this site has
     no fixed nesting depth (no sidebar-in-sidebar structure) to bake a
     dedicated inset token for. */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:20px;

  /* Z-index. The app defines 5 layers (sticky/dropdown/overlay/modal/
     toast) for its app-shell UI. This sub-phase's static pages need
     exactly one: a sticky nav bar. Add more only when a component
     that needs them actually ships. */
  --z-nav:100;

  /* Motion — scroll-reaction softening (7.A.11).
     The page's felt aggressiveness is the SPEED of its reaction to
     scrolling, not the scroll itself. These site-authored tokens name the
     slow, gentle motion that reaction now uses; the app has no scroll
     reveal or compact nav, so none of them derive from the app's file.

     --ease-gentle is a soft ease-out (easeOutCubic) with a longer, calmer
     deceleration tail than the primitive --ease-out — it settles rather
     than arrives.

     --dur-reveal is the scroll-reveal fade+rise duration. Lengthened to 1400ms
     in 7.A.12's stronger-reveal pass (was 1300ms in 7.A.11) so every piece eases
     in slowly and the rise is clearly perceptible. It is deliberately NOT added
     to the base.css reduced-motion zero list: the generic reveal block carries
     its own `transition:none` guard under prefers-reduced-motion, so the reveal
     snaps there regardless of this value.

     --dur-nav is the nav HIDE/SHOW duration (7.A.12). It formerly timed the
     compact<->full resize MORPH, which was deleted in 7.A.12 (the size switch is
     now an instant state change). Repurposed unchanged at 720ms to time the
     unhurried fade + upward drift of the whole header when it hides on
     scroll-down and returns on scroll-up. --dur-nav IS zeroed in base.css so the
     bar snaps under reduced motion (and nav.js additionally never hides it there).

     --reveal-rise is the scroll-reveal rise distance. Raised again to 64px in
     7.A.13's per-element-reveal pass (was 48px in 7.A.12, 40px in 7.A.11): now
     that EVERY individual piece rises on its own beat (not the container as a
     block), the travel is opened up further so each piece is plainly SEEN
     arriving up into place rather than barely shifting. */
  --ease-gentle:cubic-bezier(0.215,0.61,0.355,1);
  --dur-reveal:1400ms;
  --dur-nav:720ms;
  --reveal-rise:64px;
}