/* Design tokens shared by the Blazor app and ux-mockups/. Hex values must match
   FootballAnalytics.Web.Library's DesignTokens; docs/design-system.md has the catalogue. */

:root,
[data-theme="light"] {
  --fa-font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fa-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* MudBlazor 9 default Typo sizes; the Raleway family is the only theme override. */
  --fa-text-h4: 2.125rem;
  --fa-text-h5: 1.5rem;
  --fa-text-h6: 1.25rem;
  --fa-text-subtitle1: 1rem;
  --fa-text-subtitle2: 0.875rem;
  --fa-text-body1: 1rem;
  --fa-text-body2: 0.875rem;
  --fa-text-caption: 0.75rem;
  --fa-text-overline: 0.75rem;
  --fa-weight-regular: 400;
  --fa-weight-medium: 500;
  --fa-weight-semibold: 600;
  --fa-weight-bold: 700;

  /* MudBlazor's 4px spacing unit: --fa-space-2 is pa-2. */
  --fa-space-1: 4px;
  --fa-space-2: 8px;
  --fa-space-3: 12px;
  --fa-space-4: 16px;
  --fa-space-5: 20px;
  --fa-space-6: 24px;
  --fa-space-8: 32px;

  --fa-radius: 6px;
  --fa-radius-sm: 4px;
  --fa-radius-pill: 999px;

  --fa-elevation-1: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  --fa-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --fa-elevation-3: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  --fa-surface-2: #FFFFFF;
  --fa-surface-3: #FFFFFF;

  --fa-status-success: #2E7D32;
  --fa-status-warning: #B45309;
  --fa-status-error: #D32F2F;
  --fa-status-info: #0270B0;

  /* Pitch markers sit on the pitch surface, not the chart surface, so they keep their own set. */
  --fa-pitch-background: #689B8A;
  --fa-pitch-lines: #E8F5E9;
  --fa-pitch-goal: #43A047;
  --fa-pitch-on-target: #1E88E5;
  --fa-pitch-off-target: #90A4AE;
  --fa-pitch-completed: #FB8C00;
  --fa-pitch-lost: #E53935;

  /* Chart sets below are validated against #FFFFFF / #1E293B with the dataviz palette checks. */
  --fa-cat-1: #2A78D6;
  --fa-cat-2: #EB6834;
  --fa-cat-3: #1BAF7A;
  --fa-cat-4: #EDA100;
  --fa-cat-5: #E87BA4;
  --fa-cat-6: #008300;
  --fa-cat-7: #4A3AA7;
  --fa-cat-8: #E34948;

  --fa-outcome-good: #1C7F4C;
  --fa-outcome-mixed: #C28A00;
  --fa-outcome-neutral: #8A94A6;
  --fa-outcome-bad: #CC2A1B;

  /* One-hue ordinal ramp, faint to strong: recency, funnel stages, matrix intensity. */
  --fa-seq-1: #79B4FF;
  --fa-seq-2: #4A9AFC;
  --fa-seq-3: #0180F6;
  --fa-seq-4: #006ACE;
  --fa-seq-5: #0055A7;
  --fa-seq-6: #004085;

  /* Kit palette: charts only ever draw these families, never a raw kit hex. Pitch markers wear the
     kit reference (-marker, with -on for ring and number), or white/black for white and black shirts. */
  --fa-kit-red: #A21A1B;
  --fa-kit-claret: #980B40;
  --fa-kit-orange: #E06D00;
  --fa-kit-yellow: #CFAF09;
  --fa-kit-green: #009342;
  --fa-kit-teal: #00A89F;
  --fa-kit-lightblue: #12B2F4;
  --fa-kit-blue: #4A81EB;
  --fa-kit-navy: #2E49B2;
  --fa-kit-purple: #6F35A2;
  --fa-kit-pink: #C14685;
  --fa-kit-red-marker: #E30613;
  --fa-kit-red-on: #FFFFFF;
  --fa-kit-claret-marker: #7A263A;
  --fa-kit-claret-on: #FFFFFF;
  --fa-kit-orange-marker: #F47B20;
  --fa-kit-orange-on: #0F172A;
  --fa-kit-yellow-marker: #FFDD00;
  --fa-kit-yellow-on: #0F172A;
  --fa-kit-green-marker: #009933;
  --fa-kit-green-on: #0F172A;
  --fa-kit-teal-marker: #00A89F;
  --fa-kit-teal-on: #0F172A;
  --fa-kit-lightblue-marker: #80BFFF;
  --fa-kit-lightblue-on: #0F172A;
  --fa-kit-blue-marker: #0057B8;
  --fa-kit-blue-on: #FFFFFF;
  --fa-kit-navy-marker: #1B2A5A;
  --fa-kit-navy-on: #FFFFFF;
  --fa-kit-purple-marker: #582C83;
  --fa-kit-purple-on: #FFFFFF;
  --fa-kit-pink-marker: #E87BA4;
  --fa-kit-pink-on: #0F172A;
  --fa-kit-white-marker: #FFFFFF;
  --fa-kit-white-on: #0F172A;
  --fa-kit-black-marker: #111827;
  --fa-kit-black-on: #FFFFFF;

  --fa-chart-peer: #A0A7B4;
  --fa-chart-reference-line: #52514E;
  --fa-xg-accent: #FFC107;
  --fa-landing-accent: #FF6B35;
}

[data-theme="dark"] {
  /* A shadow cannot darken a dark page, so each level adds a faint light rim and a lighter surface.
     Surfaces stop at 7% towards white so secondary text keeps 4.5:1. */
  --fa-elevation-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 1px -1px rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --fa-elevation-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 1px -2px rgba(0, 0, 0, 0.4), 0 2px 6px 0 rgba(0, 0, 0, 0.35);
  --fa-elevation-3: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 3px 5px -1px rgba(0, 0, 0, 0.45), 0 6px 18px 0 rgba(0, 0, 0, 0.4);
  --fa-surface-2: #2C3647;
  --fa-surface-3: #2E3849;

  --fa-status-success: #66BB6A;
  --fa-status-warning: #FFA726;
  --fa-status-error: #F87171;
  --fa-status-info: #29B6F6;

  --fa-chart-reference-line: #C3C2B7;
  --fa-chart-peer: #52607A;

  --fa-cat-1: #3987E5;
  --fa-cat-2: #D95926;
  --fa-cat-3: #199E70;
  --fa-cat-4: #C98500;
  --fa-cat-5: #D55181;
  --fa-cat-6: #008300;
  --fa-cat-7: #9085E9;
  --fa-cat-8: #E66767;

  --fa-outcome-good: #1F9B82;
  --fa-outcome-mixed: #C17A00;
  --fa-outcome-neutral: #7B8699;
  --fa-outcome-bad: #BB061E;

  --fa-seq-1: #005BB5;
  --fa-seq-2: #0070DC;
  --fa-seq-3: #1587FE;
  --fa-seq-4: #58A3FF;
  --fa-seq-5: #88BCFE;
  --fa-seq-6: #B3D4FF;

  --fa-kit-red: #B02B27;
  --fa-kit-claret: #A6204B;
  --fa-kit-orange: #D76900;
  --fa-kit-yellow: #AB9104;
  --fa-kit-green: #019A46;
  --fa-kit-teal: #09A198;
  --fa-kit-lightblue: #009EDB;
  --fa-kit-blue: #568EF9;
  --fa-kit-navy: #3552BC;
  --fa-kit-purple: #7A41AF;
  --fa-kit-pink: #D65997;
}