/* ============================================================
   SPIKE — APU Volleyball Club Management
   Design tokens. Single source of truth.
   Values are REAL product values (1440px desktop baseline).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Saira:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Colour: brand ---------- */
  --c-navy:              #0B2E8C;  /* hero gradients, avatar chips, pressed primary */
  --c-blue:              #1651D4;  /* PRIMARY. top bar, links, training, feature cards */
  --c-blue-hover:        #113FA8;
  --c-orange:            #FF6A1A;  /* ACCENT. one per view: primary action, active rule, matches */
  --c-orange-hover:      #E55A0F;
  --c-orange-deep:       #D1560F;  /* text on orange tint */
  --c-gold:              #FFD21A;  /* deltas on dark, wins. sparingly */

  /* ---------- Colour: surfaces ---------- */
  --c-bg:                #EEF2FB;  /* app background */
  --c-surface:           #FFFFFF;  /* cards */
  --c-surface-sunken:    #F2F5FB;  /* wells inside cards, empty calendar cells, table header */
  --c-surface-zebra:     #F8FAFD;  /* even table rows, modal footer */
  --c-blue-tint:         #E8EDFA;  /* training badges, tentative cells */
  --c-blue-tint-border:  #9DB4E8;
  --c-orange-tint:       #FFF4EC;  /* match rows, callouts */
  --c-orange-tint-2:     #FFE1CF;  /* match badge fill */
  --c-border:            #E2E9F7;  /* dividers, card borders */
  --c-border-strong:     #DBE3F5;  /* input borders */
  --c-border-dashed:     #CDD9F2;  /* empty-state wells */

  /* ---------- Colour: text ---------- */
  --c-ink:               #0C1633;  /* headings, values */
  --c-ink-body:          #3A4763;  /* paragraphs, table cells */
  --c-ink-muted:         #7A8BB0;  /* labels, meta, captions */
  --c-ink-disabled:      #9DABC7;
  --c-ink-on-blue:       #FFFFFF;
  --c-ink-on-blue-muted: #BCCCF2;  /* inactive nav items */
  --c-ink-on-blue-soft:  #CFDCF8;  /* body copy on blue fills */

  /* ---------- Colour: status ---------- */
  --c-success:           #2F9E6B;  --c-success-bg: #E6F4EC;
  --c-warning:           #C47A2F;  --c-warning-bg: #FDF0E6;
  --c-danger:            #C0392B;  --c-danger-bg:  #FBEAE7;

  /* ---------- Typography ---------- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;  /* headings, buttons, metrics — ALWAYS uppercase */
  --font-body:    'Saira', system-ui, sans-serif;         /* body, labels, data */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* IDs, dates, code-like values */

  /* display / headings — Oswald, text-transform: uppercase */
  --t-display:    700 48px/1.0  var(--font-display);   /* ls .005em */
  --t-h1:         700 40px/1.05 var(--font-display);
  --t-h2:         700 32px/1.1  var(--font-display);
  --t-h3:         600 20px/1.2  var(--font-display);   /* ls .03em — card titles */
  --t-h4:         600 18px/1.25 var(--font-display);   /* ls .03em */
  --t-btn:        600 15px/1    var(--font-display);   /* ls .04em */
  --t-btn-sm:     600 13px/1    var(--font-display);
  --t-btn-lg:     600 17px/1    var(--font-display);
  --t-metric-xl:  700 56px/1.0  var(--font-display);   /* lead stat */
  --t-metric:     700 48px/1.05 var(--font-display);   /* secondary stat */

  /* body — Saira */
  --t-body-lg:    400 17px/1.6  var(--font-body);
  --t-body:       400 15px/1.65 var(--font-body);
  --t-body-strong:500 15px/1.65 var(--font-body);      /* row primary name */
  --t-caption:    400 13px/1.55 var(--font-body);      /* meta, muted */
  --t-label:      600 12px/1.3  var(--font-body);      /* uppercase, ls .08em */
  --t-badge:      600 11px/1    var(--font-body);      /* uppercase, ls .06em */
  --t-data:       400 13px/1.5  var(--font-mono);      /* dates, TP numbers */

  --ls-display:   .005em;
  --ls-heading:   .03em;
  --ls-btn:       .04em;
  --ls-label:     .08em;
  --ls-badge:     .06em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;   /* icon↔label */
  --s-2:  8px;   /* chip inner, badge padding */
  --s-3:  12px;  /* list row gap, calendar gap */
  --s-4:  16px;  /* inner card stack */
  --s-5:  20px;
  --s-6:  24px;  /* card padding, grid gutter */
  --s-8:  32px;  /* page padding, section gap */
  --s-12: 48px;  /* between major blocks */
  --s-16: 64px;  /* page top, hero padding */

  /* ---------- Radius ---------- */
  --r-sm:   6px;    /* small controls */
  --r-input:8px;    /* fields, pager, icon buttons */
  --r-md:   10px;   /* buttons, tiles, list rows */
  --r-lg:   14px;   /* cards, panels, modal */
  --r-pill: 999px;  /* badges, chips, avatars */

  /* ---------- Elevation ---------- */
  --sh-sm: 0 1px 2px  rgba(12,22,51,.06);   /* resting cards */
  --sh-md: 0 4px 12px rgba(12,22,51,.08);   /* hover lift */
  --sh-lg: 0 14px 34px rgba(6,20,60,.18);   /* modal, popover, toast */
  --ring:  0 0 0 3px rgba(22,81,212,.28);   /* focus — never remove */
  --scrim: rgba(12,22,51,.55);

  /* ---------- Motion ---------- */
  --motion-fast: 120ms;  /* hover, press */
  --motion-base: 180ms;  /* panels, routes, modal enter */
  --motion-slow: 260ms;  /* max duration in the system */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ---------- Layout ---------- */
  --topbar-h:      64px;   /* sticky, full-bleed --c-blue, z-index 100 */
  --content-max:   1240px;
  --page-pad:      32px;
  --grid-cols:     12;
  --gutter:        24px;
  --measure:       680px;  /* article body max-width */
  --field-h:       46px;
  --btn-h-sm:      38px;
  --btn-h:         46px;
  --btn-h-lg:      54px;
  --row-h:         68px;   /* list row */
  --avatar:        40px;
  --avatar-sm:     34px;
  --date-tile:     52px;
  --calendar-min-h:200px;
  --calendar-col-min:140px; /* below 1024 the week grid scrolls x at this width */

  /* ---------- Signature motifs ---------- */
  --hero-gradient: linear-gradient(120deg, #1651D4, #0B2E8C);
  --watermark:     rgba(255,255,255,.12);  /* 70–140px circle, bleeds off top-right, ONE per view */
  --watermark-orange: rgba(255,106,26,.35);/* same, on article heroes */
  --rail-w:        4px;    /* list row left border: blue=member/training, orange=committee/match, grey=archived */
  --accent-bar:    3px;    /* stat card bottom border + active nav underline */
}

/* Breakpoints (desktop-first)
   >=1280  full layout
   1024–1279  --page-pad 24px, stat row stays 3-up but tighter
   768–1023   stat row 3→2, week calendar scrolls horizontally
   <768       single column, top bar collapses to logo + hamburger drawer
*/

/* Tabular figures for any column of numbers */
.tnum { font-variant-numeric: tabular-nums; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}