/* File: public_html/assets/css/tokens.css  File Version: 1
 * History: V1 20260817  Design tokens extracted so the ADMIN can use them too (v0.31.0)
 *
 * WHY THIS FILE EXISTS, SEPARATE FROM theme.css
 * The admin renders its own <style> block and never links theme.css. When the
 * hex literals were replaced with var() references, every token in the admin
 * resolved to nothing and the whole panel lost its colour. Tokens therefore
 * live here, and BOTH the public head and the admin link this file first.
 * A theme stylesheet loads AFTER it and redeclares the same names.
 */

:root {
  /* ------------------------------------------------------------------
     DESIGN TOKENS (v0.31.0)

     Every colour, radius and font in the application resolves through a
     token declared here. Nothing downstream hard-codes a hex value, which
     is what makes a theme possible: a theme file is simply this block,
     redeclared. Before this change ~1,357 hex literals were written inline
     on elements, and an inline style cannot be overridden by a stylesheet
     — so no theme could ever have taken effect.
     ------------------------------------------------------------------ */

  /* --- brand --- */
  --c-primary: #2563eb;
  --c-primary-dark: #1d4ed8;
  --c-primary-deep: #1e40af;
  --c-primary-alt: #1e54c6;
  --c-primary-soft: #eff6ff;
  --c-navy: #0f2a4a;

  /* --- ink scale --- */
  --c-ink-900: #0f172a;
  --c-ink: #1e293b;
  --c-ink-2: #334155;
  --c-ink-3: #475569;
  --c-muted: #64748b;
  --c-faint: #94a3b8;

  /* --- lines and surfaces --- */
  --c-line-strong: #cbd5e1;
  --c-border: #e2e8f0;
  --c-border-soft: #eef2f7;
  --c-border-soft2: #eef2f8;
  --c-surface: #ffffff;
  /* Same colour as --c-surface but as raw channels, for the handful of places
     that need a TRANSLUCENT page surface: rgba() cannot accept a hex custom
     property, so a sticky header written as rgba(255,255,255,.94) could never
     follow a dark style. Only page surfaces use this — overlays that sit on a
     coloured band stay literally white on purpose. */
  --c-surface-rgb: 255, 255, 255;
  /* Text that sits on a saturated colour fill (buttons, bands, badges).
     Stays light even in dark styles, because the fill underneath is still
     a strong colour — unlike --c-surface, which inverts. */
  --c-on-fill: #ffffff;
  --c-soft: #f8fafc;
  --c-soft-2: #f1f5f9;

  /* --- semantic: danger / warn / success / info --- */
  --c-danger: #dc2626;
  --c-danger-alt: #ef4444;
  --c-danger-line: #fecaca;
  --c-danger-soft: #fef2f2;
  --c-danger-soft2: #fff5f5;
  --c-warn-ink: #b45309;
  --c-warn-ink2: #92400e;
  --c-warn-line: #fde68a;
  --c-warn-soft: #fffbeb;
  --c-warn-soft2: #fef3c7;
  --c-success: #059669;
  --c-success-alt: #16a34a;
  --c-success-deep: #166534;
  --c-success-soft: #ecfdf5;
  --c-pink: #db2777;
  --c-pink-alt: #e11d48;
  --c-pink-soft: #fdf2f8;
  --c-violet: #7c3aed;
  --c-sky: #38bdf8;
  --c-teal: #0d9488;

  /* --- accents --- */
  --c-accent: #f4b400;
  --c-accent2: #ff5d73;
  --c-accent3: #10b981;
  --c-soft-alt: #f8fafc;
  --c-band-from: #2563eb;
  --c-band-to: #1d4ed8;

  /* --- shape and type --- */
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --font-head: 'Outfit', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}