/* Step N Sound — Performing Arts & Gymnastics — Brand Tokens (v2, 2026 logo)
   Canonical names are fixed; values are brand-specific.
   Usage: @import "tokens.css";  then reference var(--color-primary), etc.

   Web font: Jost (self-hosted variable font, OFL licence — weights 100–900).
   Print/desktop headline font is Futura; Jost is its web equivalent.

   Colors + gradient are taken EXACTLY from the 2026 vector logo (SVG stops /
   PDF separations). The Splash Gradient runs cyan → purple → pink → amber:
     --gradient-splash  (the signature 4-color band; amber lands at the end)
     --gradient-warm    (amber → pink   — admin highlights & buttons; DARK-ink label)
     --gradient-cool    (purple → blue  — admin highlights & buttons; WHITE label) */

@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/Jost-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color — brand (exact 2026 logo inks) */
  --color-primary: #92278F;        /* Splash Purple — logo gradient purple + global primary */
  --color-primary-dark: #71206E;   /* [derived] headers, white-text surfaces (9.8:1) */
  --color-primary-light: #C96FC0;  /* [derived] dark-mode labels/values */
  --color-secondary: #00AEEF;      /* Splash Cyan — the boy "N", splatter, big graphics */
  --color-secondary-dark: #006A93; /* [derived] Deep Teal — the text-safe cyan (links/buttons) */
  --color-secondary-light: #7BD3F7;/* [derived] */
  --color-accent: #FBB040;         /* Splash Amber — warm highlights, gradient end */
  --color-accent-2: #EE2A7B;       /* Splash Pink — the girl "N", gradient mid, energy accents */

  /* Color — neutrals */
  --color-neutral-50: #F8F9FA;  --color-neutral-100: #F1F2F4;
  --color-neutral-200: #E4E6E9; --color-neutral-300: #D2D5D9;
  --color-neutral-400: #A1A2A4; --color-neutral-500: #7F8186;
  --color-neutral-600: #63656A; --color-neutral-700: #4C4E54;
  --color-neutral-800: #3B3D42; --color-neutral-900: #26272B;

  /* Color — semantic surfaces */
  --color-bg: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-text: #3B3D42;
  --color-text-muted: #63656A;
  --color-border: #E4E6E9;

  /* Color — status */
  --color-success: #17804A;
  --color-warning: #B45309;
  --color-error: #D1244F;
  --color-info: #006A93;

  /* Brand gradients (constant across themes — brand hues don't flip).
     Built from the palette so they track any color change.
     TEXT ON GRADIENTS: white is safe on --gradient-cool's purple end and on the
     purple/pink middle of --gradient-splash; use DARK ink (--color-neutral-900) on
     --gradient-warm (amber can't carry white). Never set small/body text over the
     amber or cyan ends — reserve those for large labels or non-text highlights. */
  --gradient-splash: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 39%, var(--color-accent-2) 73%, var(--color-accent) 100%);
  --gradient-warm:   linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  --gradient-cool:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  /* Typography */
  --font-heading: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;--text-4xl: 2.25rem; --text-5xl: 3rem;
  --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.75;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radius — square/sharp shape language. Cards, panels, inputs & buttons have hard
     corners (0); the circular badge is the brand's one round shape. Pills & badges
     stay fully round via --radius-full. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 9999px;

  /* Shadow — soft, airy */
  --shadow-sm: 0 1px 3px rgba(38, 39, 43, .08);
  --shadow-md: 0 4px 14px rgba(38, 39, 43, .10);
  --shadow-lg: 0 14px 34px rgba(38, 39, 43, .16);

  /* Layout & motion */
  --container-max: 1200px;
  --transition-base: .2s ease;

  /* Navigation / app-shell sidebar — LIGHT theme.
     Grouped-card layout; section labels + hover/active use the brand color.
     The active item may instead use var(--gradient-cool) for a branded highlight. */
  --nav-bg: #F1F2F4;
  --nav-group-bg: #FFFFFF;
  --nav-group-border: #E4E6E9;
  --nav-group-radius: 0px;
  --nav-group-gap: 12px;
  --nav-section-label: #71206E;              /* primary-dark (9.8:1 on white) */
  --nav-item: #26272B;
  --nav-item-muted: #63656A;
  --nav-item-hover-bg: #F6EDF6;              /* ~8% Splash Purple tint */
  --nav-item-hover-text: #71206E;
  --nav-item-active-bg: #92278F;
  --nav-item-active-text: #FFFFFF;
  --nav-item-active-accent: #71206E;
  --nav-icon: #63656A;
  --nav-icon-active: #FFFFFF;
  --nav-badge-bg: #006A93;                   /* Deep Teal — carries white at AA */
  --nav-badge-text: #FFFFFF;
  --nav-divider: #E4E6E9;
  --nav-tree-line: #D2D5D9;
  --nav-width: 272px;
  --nav-width-collapsed: 72px;

  /* Dashboard / data-display — LIGHT theme.
     Section headers = darker "separation break"; KPI tiles hover-invert to the dark
     brand color. Highlight bars / accents may use --gradient-warm or --gradient-cool. */
  --card-bg: #FFFFFF;
  --card-border: #E4E6E9;
  --card-radius: 0px;
  --card-shadow: 0 1px 3px rgba(38, 39, 43, .08);
  --card-header-bg: #71206E;                 /* shade 1 — primary-dark (9.8:1 w/ white) */
  --card-header-bg-2: #006A93;               /* shade 2 — Deep Teal (6.0:1) */
  --card-header-bg-3: #26272B;               /* shade 3 — neutral-900 */
  --card-header-text: #FFFFFF;
  --tile-bg: #FFFFFF;
  --tile-border: #E4E6E9;
  --tile-label: #63656A;
  --tile-value: #71206E;                     /* primary-dark */
  --tile-accent: #92278F;                    /* primary (or a gradient bar) */
  --tile-hover-bg: #71206E;
  --tile-hover-text: #FFFFFF;
  --table-header-bg: #F1F2F4;
  --table-header-text: #63656A;
  --table-stripe: #F8F9FA;
  --table-row-hover: #F6EDF6;                /* faint Splash Purple tint */
  --table-border: #E4E6E9;
  --chart-1: #92278F; --chart-2: #00AEEF; --chart-3: #FBB040;
  --chart-4: #EE2A7B; --chart-5: #006A93; --chart-6: #8A8D93;
  --chart-grid: #E4E6E9;
  --chart-axis: #A1A2A4;
  --chart-label: #63656A;
}

/* ===== DARK THEME ===== set [data-theme="dark"] on <html> or a wrapper.
   Surfaces flip to dark; brand hues + gradients stay constant. */
[data-theme="dark"] {
  --color-bg: #17181C;
  --color-surface: #1D1F24;
  --color-text: #ECEDEF;
  --color-text-muted: #A4A6AC;
  --color-border: #2E3138;

  --nav-bg: #121317;
  --nav-group-bg: #1D1F24;
  --nav-group-border: #2E3138;
  --nav-section-label: #C96FC0;              /* primary-light (5.1:1 on the card) */
  --nav-item: #D9DBDF;
  --nav-item-muted: #A4A6AC;
  --nav-item-hover-bg: #32203A;              /* ~ Splash Purple over the card */
  --nav-item-hover-text: #C96FC0;
  --nav-item-active-bg: #92278F;
  --nav-item-active-text: #FFFFFF;
  --nav-item-active-accent: #C96FC0;
  --nav-icon: #A4A6AC;
  --nav-icon-active: #FFFFFF;
  --nav-badge-bg: #006A93;
  --nav-badge-text: #FFFFFF;
  --nav-divider: #2E3138;
  --nav-tree-line: #3A3D44;

  --card-bg: #1D1F24;
  --card-border: #2E3138;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  --card-header-bg: #71206E;
  --card-header-bg-2: #006A93;
  --card-header-bg-3: #101216;
  --card-header-text: #FFFFFF;
  --tile-bg: #1D1F24;
  --tile-border: #2E3138;
  --tile-label: #A4A6AC;
  --tile-value: #C96FC0;                     /* primary-light on dark */
  --tile-accent: #92278F;
  --tile-hover-bg: #71206E;
  --tile-hover-text: #FFFFFF;
  --table-header-bg: #22242A;
  --table-header-text: #A4A6AC;
  --table-stripe: #24262C;
  --table-row-hover: #32203A;
  --table-border: #2E3138;
  --chart-grid: #2E3138;
  --chart-axis: #565962;
  --chart-label: #A4A6AC;
}