/* ============================================================================
   CHEERCAST DESIGN TOKENS · v4 (unified) — global :root sheet
   ----------------------------------------------------------------------------
   The one token sheet for every surface: marketing (Breakdance), apps
   (routine list / judging / account), forms (Gravity Forms Orbital,
   MemberPress) and any future chrome. Source design: the Cheercast Design
   System v4 (Claude Design handoff, "Clarity" direction — airy warm-neutral
   surfaces, two action colours, sharp 6px controls).

   Relationship to tokens.css (the routine-list sheet): that sheet re-declares
   the same grammar scoped to .cc-routine-list/.cc-theme with values tuned for
   the app surfaces (notably its dark palette + status colours). Scoped values
   win inside those components by inheritance proximity; this sheet provides
   the page-level defaults everything else (Customizer CSS, GF Orbital
   mappings, MemberPress) resolves against.

   Brand colour arrives via --pagetheme. It is deliberately NOT defined here:
     · CCAU pages       fall back to Cheercast Blue (#3169F7) below
     · EP judging posts get it injected from jcp_event_theme (wp_head,
                        inject_page_theme in class-mv-crm-frontend.php)
     · Breakdance       can set it per page/section for event pages
     · CCRW site-wide   brand purple #4E00FF (logo deep #271073) — set with the Customizer rewrite
   Every accent tint derives from --accent via color-mix, so one --pagetheme
   re-skins buttons, links, chips and focus rings with no per-brand overrides
   (same derivation as the scoped routine-list sheet).
   ========================================================================== */

/* — Geist (UI) + Geist Mono — self-hosted variable fonts (SIL OFL; see
   ../fonts/GEIST-LICENSE.txt). The display faces (area-extended, politica)
   come from the Adobe Fonts kit the sites already load — only Geist is ours
   to ship. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  /* — brand (fixed references, never overridden) — */
  --brand-blue:       #3169F7;          /* Cheercast Blue — CCAU default      */
  --brand-ccrw:       #4E00FF;          /* CCRW accent (brand purple)         */
  --brand-ccrw-deep:  #271073;          /* CCRW deep purple — logo / dark      */
  --black:            #0C0C0E;          /* "Arena black" — footer, 2nd action */

  /* — surfaces (Clarity: warm-neutral, gradient-free) — */
  --bg:               #f7f7f5;
  --panel:            #ffffff;
  --surface:          #f4f4f3;
  --surface-2:        #ebebe9;
  --surface-3:        #e0e0dd;
  --hover:            #efefed;

  /* — borders — */
  --border:           #e9e9e6;
  --border-2:         #d9d9d5;
  --border-3:         #b8b8b3;
  --border-strong:    #b8b8b3;

  /* — text — */
  --fg:               #17181a;
  --fg-2:             #52555c;
  --fg-3:             #797d84;
  --fg-4:             #9a9da4;

  /* — accent (derives from --pagetheme; tints derive from --accent) — */
  --accent:           var(--pagetheme, #3169F7);
  --accent-hi:        color-mix(in oklab, var(--accent) 80%, black 20%);
  --accent-fg:        #ffffff;
  --accent-soft:      color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-soft-2:    color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border:    color-mix(in srgb, var(--accent) 26%, transparent);

  /* — semantic (status & feedback only, never decoration) — */
  --good:             #0a7d3b;
  --good-soft:        rgba(10, 125, 59, 0.10);
  --warn:             #b45309;
  --warn-soft:        rgba(180, 83, 9, 0.10);
  --danger:           #c2151f;
  --danger-soft:      rgba(194, 21, 31, 0.10);
  --info:             #155bd5;
  --info-soft:        rgba(21, 91, 213, 0.10);

  /* — radii (controls 6 · cards 8 · panels 12 · pill 999) — */
  --radius-sm:        6px;
  --radius:           8px;
  --radius-lg:        12px;
  --radius-pill:      999px;

  /* — elevation — */
  --shadow-sm:        0 1px 2px rgba(20, 18, 12, 0.05);
  --shadow-card:      0 1px 3px rgba(20, 18, 12, 0.06), 0 6px 18px rgba(20, 18, 12, 0.05);
  --shadow-pop:       0 10px 30px rgba(20, 14, 0, 0.10), 0 2px 6px rgba(20, 14, 0, 0.05);

  /* — type (display = Adobe kit, Black 900 only; UI/body = Geist) — */
  --font-display:     "area-extended", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-ui:          "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:        "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — spacing scale (4-based) — */
  --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;

  /* — controls — */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* — layout — */
  --container:        1200px;
  --container-text:   720px;
}

/* CCRW sub-brand: accent = the brand purple #4E00FF (all tints derive);
   #271073 is the deep logo purple, exposed as --accent-deep for logo / dark
   chrome use (not the interactive accent). */
[data-brand="ccrw"] {
  --pagetheme:        #4E00FF;
  --accent-deep:      #271073;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:               #0f0f10;
  --panel:            #17181b;
  --surface:          #1c1d20;
  --surface-2:        #232427;
  --surface-3:        #2a2c30;
  --hover:            #1f2024;

  --border:           #232427;
  --border-2:         #2a2c30;
  --border-3:         #3a3d42;
  --border-strong:    #4a4e55;

  --fg:               #f4f5f7;
  --fg-2:             #c8ccd2;
  --fg-3:             #9aa0a8;
  --fg-4:             #6c727b;

  /* Accent used as TEXT on dark surfaces lightens toward white (the
     light-mode darken-toward-black would vanish); tints bump their mix so
     overlays still register against dark surfaces. */
  --accent-hi:        color-mix(in oklab, var(--accent) 58%, white 42%);
  --accent-soft:      color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-soft-2:    color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-border:    color-mix(in srgb, var(--accent) 46%, transparent);

  /* Semantic colours brighten to read as text on dark. */
  --good:             #2bbf86;
  --good-soft:        rgba(43, 191, 134, 0.18);
  --warn:             #f5a524;
  --warn-soft:        rgba(245, 165, 36, 0.14);
  --danger:           #f43f5e;
  --danger-soft:      rgba(244, 63, 94, 0.16);
  --info:             #6aa9ff;
  --info-soft:        rgba(106, 169, 255, 0.18);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-pop:       0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ── Shared helpers (cc- prefixed — a bare .mono would collide with other
   plugins/themes; see the same note in tokens.css) ──────────────────────── */
.cc-mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-variant-numeric: tabular-nums;
}
.cc-tabular {
  font-variant-numeric: tabular-nums;
}