/* ============================================================
   CINDER TV — DESIGN TOKENS (single source of truth)
   ------------------------------------------------------------
   Loaded FIRST among the Cinder stylesheets (before custom.css)
   so every later rule — and every page — resolves against one
   canonical set of values. Nothing in this file paints anything;
   it only declares variables.

   Namespaces:
     --cinder-site-*   canonical colors / shadows (KEEP — widely used)
     --r-*             canonical radius scale (forward-looking)
     --cs-*            spacing + type scale + motion
     --font-*          brand type stacks (Hanken Grotesk / Jost)

   The legacy `--cinder-*` (no -site-) namespace in custom.css is
   being retired; do not add to it. Radius convergence onto --r-md
   (14px flat hairline) happens during the surface-migration phases,
   not here — legacy radius values are preserved 1:1 below so adding
   this file causes ZERO visual change on its own.
   ============================================================ */

:root {
    /* ── Brand type stacks (real webfonts, loaded in head.tpl) ── */
    --font-body: "Hanken Grotesk", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Jost", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* ── Color — backgrounds / surfaces ── */
    --cinder-site-bg: #090c10;
    --cinder-site-bg-elevated: #11151b;
    --cinder-site-surface: rgba(17, 22, 28, 0.9);
    --cinder-site-surface-strong: rgba(23, 29, 37, 0.96);
    --cinder-site-elevated: rgba(29, 36, 45, 0.98);

    /* ── Color — borders ── */
    --cinder-site-border: rgba(255, 255, 255, 0.08);
    --cinder-site-border-strong: rgba(255, 255, 255, 0.18);

    /* ── Color — text (cool white-grey, matches the greyish-white logo) ── */
    --cinder-site-copy: rgba(237, 241, 246, 0.95);
    --cinder-site-copy-soft: rgba(237, 241, 246, 0.74);
    --cinder-site-copy-muted: rgba(237, 241, 246, 0.56);

    /* ── Color — accent (cool BLUE, white ink) ── */
    --cinder-site-accent: #4f8cff;
    --cinder-site-accent-soft: #8fb6ff;
    --cinder-site-accent-strong: #7aa7ff;
    --cinder-site-accent-dark: #2f6fe0;
    --cinder-site-accent-ink: #ffffff;

    /* ── Chrome (silver) drives resting borders / hover / focus rings.
          The ambient GLOW is a separate blue rgb — never merge them. ── */
    --cinder-site-accent-rgb: 188, 199, 214;
    --cinder-site-glow-rgb: 79, 140, 255;

    /* ── Status (semantic; amber is the only allowed warm — ember retired) ── */
    --cinder-site-success: #33c27f;
    --cinder-site-danger: #ff6b6b;
    --cinder-site-warning: #f0b24d;

    /* ── Elevation ── */
    --cinder-site-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    --cinder-site-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.40);

    /* ── Radius — NEW canonical scale (forward-looking) ── */
    --r-xs: 8px;
    --r-sm: 10px;   /* buttons, inputs */
    --r-md: 14px;   /* cards — the canonical "flat hairline" */
    --r-lg: 18px;   /* hero / large feature panels */
    --r-pill: 999px;

    /* ── Radius — legacy names preserved at CURRENT values (zero regression).
          Migrated onto the --r-* scale per surface, then deleted in Phase G. ── */
    --cinder-site-radius: 10px;
    --cinder-site-radius-lg: 16px;
    --cinder-site-radius-pill: 999px;

    /* ── Spacing scale ── */
    --cs-space-1: 4px;
    --cs-space-2: 8px;
    --cs-space-3: 12px;
    --cs-space-4: 16px;
    --cs-space-5: 24px;
    --cs-space-6: 32px;
    --cs-space-7: 48px;
    --cs-space-8: 64px;

    /* ── Type scale ── */
    --cs-fs-xs: 12px;
    --cs-fs-sm: 14px;
    --cs-fs-base: 16px;
    --cs-fs-lg: 20px;
    --cs-fs-xl: 26px;
    --cs-fs-2xl: 34px;
    --cs-fs-3xl: 52px;

    /* ── Motion ── */
    --cs-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    color-scheme: dark;
}