/* ==========================================================================
   THE FMDB design tokens
   --------------------------------------------------------------------------
   Every component reads from these custom properties. Nothing downstream
   hard-codes a colour, size, radius, shadow, z-index or duration.

   Themes: light is the default. White adds neutral white surfaces; dark
   retains the slate night palette; black uses a true-black canvas.
   Explicit data-theme choices always take precedence over the OS preference.
   ========================================================================== */

:root {
  color-scheme: light;

  --color-masthead: #152b49;
  --color-masthead-raised: #213c5e;
  --color-masthead-ink: #f5f8ff;
  --color-masthead-muted: #afc3dd;
  --color-brand-blue: #739ee8;
  --masthead-color-scheme: dark;
  --color-masthead-hover: #2b4b73;
  --color-masthead-secondary: #d0def0;
  --color-masthead-border: #3c5473;
  --color-masthead-border-subtle: #2c4565;
  --color-masthead-border-strong: #8099b9;
  --color-masthead-accent: #a5c6ff;
  --color-masthead-accent-soft: #314d71;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px - column headers, badges */
  --text-xs: 0.75rem;    /* 12px - dense table cells, notes */
  --text-sm: 0.875rem;  /* 14px - tables and form controls */
  --text-md: 0.9375rem;   /* 15px - body */
  --text-lg: 1rem;       /* 16px */
  --text-xl: 1.25rem;   /* 20px - panel headings */
  --text-2xl: 1.625rem;  /* 26px - section headings */
  --text-3xl: 2.25rem;   /* 36px - page titles */
  --text-4xl: 3.25rem;    /* 52px - entity names */
  --text-5xl: 4rem;    /* 64px - squad number tile */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-loose: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.06em;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.125rem;  /* 2px */
  --space-2: 0.25rem;   /* 4px */
  --space-3: 0.375rem;  /* 6px */
  --space-4: 0.5rem;    /* 8px */
  --space-5: 0.75rem;   /* 12px */
  --space-6: 1rem;      /* 16px */
  --space-7: 1.25rem;   /* 20px */
  --space-8: 1.5rem;    /* 24px */
  --space-9: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-11: 3rem;     /* 48px */
  --space-12: 4rem;     /* 64px */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- Borders and strokes --------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-accent: 3px;   /* alert rules, zone rules, active sidebar item */
  --border-width-heavy: 4px;    /* squad-number tile top rule */
  --stroke-thin: 1.5px;         /* chevrons and sort arrows */
  --stroke: 2px;                /* checkmarks, spinners, marker rings */

  /* ---- Breakpoints (documentation only: media queries cannot read custom properties)
       sm 640px  md 768px  lg 900px  xl 1024px  2xl 1200px  3xl 1280px ---- */

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1600px;
  --container-prose: 68ch;
  --navbar-height: 4.5rem;
  --sidebar-width: 15rem;
  --sidebar-rail-width: 4.5rem;
  --gutter: var(--space-4);
  --panel-gap: var(--space-7);

  /* ---- Control sizes ---------------------------------------------------- */
  --control-height-sm: 2rem;  /* 28px */
  --control-height-md: 2.625rem; /* 34px */
  --control-height-lg: 3.25rem;   /* 40px */
  --control-padding-x-sm: var(--space-4);
  --control-padding-x-md: var(--space-5);
  --control-padding-x-lg: var(--space-6);

  /* ---- Z-index ---------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- Motion ----------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ======================================================================
     LIGHT PALETTE
     ====================================================================== */
  --color-canvas: #eef2f6;          /* page background behind panels   */
  --color-surface: #ffffff;         /* panels, cards, table bodies     */
  --color-surface-raised: #f7f9fb;  /* panel headers, table heads      */
  --color-surface-sunken: #f5f7fa;  /* zebra rows, wells, inputs       */
  --color-surface-hover: #edf3fc;   /* row hover                       */
  --color-surface-overlay: #ffffff; /* dropdowns, modals, toasts       */
  --color-surface-inverse: #183153; /* primary button, tooltips        */
  --color-backdrop: rgba(20, 22, 26, 0.55);

  --color-text: #182b43;
  --color-text-secondary: #44576c;
  --color-text-muted: #5f6f84;
  --color-text-faint: #8b929b;      /* decorative only, below AA       */
  --color-text-inverse: #f5f6f7;
  --color-text-on-accent: #ffffff;

  --color-border: #d6dfe9;
  --color-border-strong: #acbbcc;
  --color-border-subtle: #e5ebf1;

  --color-accent: #245caa;           /* links, focus, active states     */
  --color-accent-hover: #15457e;
  --color-accent-soft: #e7effa;      /* selected rows, key attributes   */
  --color-accent-ring: #4d95ee;

  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);

  /* Semantic: meaning is fixed, never used as decoration */
  --color-success: #178a3f;
  --color-success-soft: #dff3e5;
  --color-warning: #9a6300;
  --color-warning-soft: #fbefd2;
  --color-danger: #c8321f;
  --color-danger-soft: #fbe2de;
  --color-info: #245caa;
  --color-info-soft: #e7effa;
  --color-special: #7a3fb3;          /* loan / youth / special status   */
  --color-special-soft: #efe4fb;

  /* Ink on top of a solid semantic fill */
  --color-on-success: #0b1a0f;
  --color-on-warning: #1f1600;
  --color-on-danger: #ffffff;
  --color-on-special: #ffffff;
  --color-on-crest: #ffffff;         /* letter on a club-colour crest   */
  --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.6);
  --color-hatch: rgba(0, 0, 0, 0.25); /* hatching on potential bars     */

  /* Entity accent: set per page from the entity's stored colours */
  --entity-accent: var(--color-accent);
  --entity-accent-2: var(--color-surface);
  --entity-tint: color-mix(in srgb, var(--entity-accent) 9%, transparent);
  --entity-tint-strong: color-mix(in srgb, var(--entity-accent) 18%, transparent);

  /* Data requests: fields the backend does not supply yet */
  --color-request: #9a6300;
  --color-request-soft: rgba(154, 99, 0, 0.12);
  --color-request-ink: #6b4500;

  /* Charts */
  --chart-line: var(--entity-accent);
  --chart-grid: var(--color-border-subtle);
  --chart-axis: var(--color-text-muted);
  --chart-point: var(--color-surface);

  /* Attribute bands (1-20 scale, as FM colours them) */
  --color-attr-low: #6f7780;         /* 1-5   */
  --color-attr-mid: #182b43;         /* 6-10  */
  --color-attr-good: #5f7d0e;        /* 11-14 */
  --color-attr-elite: #157d3a;       /* 15-20 */
  --color-attr-bar-track: #e5ebf1;
  --color-attr-bar-low: #acbbcc;
  --color-attr-bar-mid: #8b929b;
  --color-attr-bar-good: #9dc24a;
  --color-attr-bar-elite: #2fae5a;

  /* Pitch */
  --color-pitch: #316750;
  --color-pitch-line: rgba(255, 255, 255, 0.75);
  --color-pitch-pos: rgba(0, 0, 0, 0.28);          /* not recorded */
  --color-pitch-pos-natural: #35d35e;               /* 20 */
  --color-pitch-pos-accomplished: #b9e14f;          /* 15-19 */
  --color-pitch-pos-competent: #f2c930;             /* 10-14 */
  --color-pitch-pos-unconvincing: #f28a3d;          /* 5-9 */
  --color-pitch-pos-awkward: #9aa0a6;               /* 1-4 */
  --color-pitch-pos-text: #10240f;
  --color-pitch-pos-ink: rgba(255, 255, 255, 0.85); /* text on a blank marker */
  --color-pitch-ring: rgba(255, 255, 255, 0.6);
  --color-pitch-ring-strong: rgba(255, 255, 255, 0.9);
  --color-pitch-stripe: rgba(255, 255, 255, 0.05);

  /* Ratings */
  --color-star: #e7b416;
  --color-star-empty: #cfd3d9;

  /* Results */
  --color-result-win: #178a3f;
  --color-result-draw: #9a6300;
  --color-result-loss: #c8321f;

  /* Skeleton */
  --color-skeleton: #e5ebf1;
  --color-skeleton-shine: #f3f5f7;

  /* ---- Shadows (light) -------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 22, 26, 0.12), 0 1px 3px rgba(20, 22, 26, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 22, 26, 0.2), 0 2px 6px rgba(20, 22, 26, 0.1);
  --shadow-focus: 0 0 0 var(--focus-ring-width) var(--color-accent-ring);
}

/* Light: neutral reading surfaces with clear separation and dark ink.
   Keep this separate from the shared base so White stays bright. */
:root:not([data-theme]),
:root[data-theme="light"] {
  --color-canvas: #c9cdcf;
  --color-surface: #e7e9ea;
  --color-surface-raised: #d8dcde;
  --color-surface-sunken: #d6dbde;
  --color-surface-hover: #d0dce5;
  --color-surface-overlay: #eceeef;

  --color-text: #151a1e;
  --color-text-secondary: #2e373f;
  --color-text-muted: #444f58;
  --color-text-faint: #65717a;
  --color-border: #a5afb6;
  --color-border-strong: #78858f;
  --color-border-subtle: #bdc5ca;
  --color-accent: #194f91;
  --color-accent-soft: #b9cde3;
  --color-accent-ring: #245caa;

  --color-success: #0b5b29;
  --color-success-soft: #bed6c5;
  --color-warning: #6d4900;
  --color-warning-soft: #ddd0aa;
  --color-danger: #96281e;
  --color-danger-soft: #dfc5c1;
  --color-info: #194f91;
  --color-info-soft: #b9cde3;
  --color-special: #623090;
  --color-special-soft: #d0c5df;
  --color-on-success: #ffffff;
  --color-on-warning: #ffffff;
  --color-request: #795000;
  --color-request-ink: #593b00;

  --color-attr-low: #405366;
  --color-attr-mid: #151a1e;
  --color-attr-good: #405906;
  --color-attr-elite: #0d602b;
  --color-attr-bar-track: #bdc5ca;
  --color-attr-bar-low: #8496a7;
  --color-star-empty: #9eafbe;
  --color-result-win: #0b5b29;
  --color-result-draw: #6d4900;
  --color-result-loss: #96281e;
  --color-skeleton: #bdc5ca;
  --color-skeleton-shine: #e7e9ea;
}

/* ==========================================================================
   DARK PALETTE - the Football Manager look
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --color-canvas: #111d2d;
    --color-surface: #1a2a3d;
    --color-surface-raised: #21344b;
    --color-surface-sunken: #172538;
    --color-surface-hover: #253c54;
    --color-surface-overlay: #21344b;
    --color-surface-inverse: #f2f3f4;
    --color-backdrop: rgba(0, 0, 0, 0.65);

    --color-text: #edf3fa;
    --color-text-secondary: #c2cfde;
    --color-text-muted: #9caec3;
    --color-text-faint: #6c7076;
    --color-text-inverse: #182b43;
    --color-text-on-accent: #0b1220;

    --color-border: #33475f;
    --color-border-strong: #49627d;
    --color-border-subtle: #2b3c52;

    --color-accent: #7cb8ff;
    --color-accent-hover: #a3ccff;
    --color-accent-soft: rgba(124, 184, 255, 0.16);
    --color-accent-ring: #7cb8ff;

    --color-success: #5fd07a;
    --color-success-soft: rgba(95, 208, 122, 0.16);
    --color-warning: #f0b93a;
    --color-warning-soft: rgba(240, 185, 58, 0.16);
    --color-danger: #ff7b6e;
    --color-danger-soft: rgba(255, 123, 110, 0.16);
    --color-info: #7cb8ff;
    --color-info-soft: rgba(124, 184, 255, 0.16);
    --color-special: #c99cf5;
    --color-special-soft: rgba(201, 156, 245, 0.16);
    --color-request: #f0b93a;
    --color-request-soft: rgba(240, 185, 58, 0.14);
    --color-request-ink: #f7d27a;

    --color-attr-low: #8d9297;
    --color-attr-mid: #edf3fa;
    --color-attr-good: #cfe07a;
    --color-attr-elite: #6fe08a;
    --color-attr-bar-track: #33475f;
    --color-attr-bar-low: #49627d;
    --color-attr-bar-mid: #8d9297;
    --color-attr-bar-good: #b9cd5a;
    --color-attr-bar-elite: #4fc86c;

    --color-pitch: #2b5d49;
    --color-pitch-line: rgba(255, 255, 255, 0.7);
    --color-pitch-pos: rgba(0, 0, 0, 0.35);
    --color-pitch-pos-natural: #35d35e;
    --color-pitch-pos-accomplished: #b9e14f;
    --color-pitch-pos-competent: #f2c930;
    --color-pitch-pos-unconvincing: #f28a3d;
    --color-pitch-pos-awkward: #9aa0a6;
    --color-pitch-pos-text: #10240f;

    --color-star: #f4c62d;
    --color-star-empty: #49627d;

    --color-result-win: #5fd07a;
    --color-result-draw: #f0b93a;
    --color-result-loss: #ff7b6e;

    --color-skeleton: #21344b;
    --color-skeleton-shine: #33475f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

:root:is([data-theme="dark"], [data-theme="black"]) {
  color-scheme: dark;

  --color-canvas: #111d2d;
  --color-surface: #1a2a3d;
  --color-surface-raised: #21344b;
  --color-surface-sunken: #172538;
  --color-surface-hover: #253c54;
  --color-surface-overlay: #21344b;
  --color-surface-inverse: #f2f3f4;
  --color-backdrop: rgba(0, 0, 0, 0.65);

  --color-text: #edf3fa;
  --color-text-secondary: #c2cfde;
  --color-text-muted: #9caec3;
  --color-text-faint: #6c7076;
  --color-text-inverse: #182b43;
  --color-text-on-accent: #0b1220;

  --color-border: #33475f;
  --color-border-strong: #49627d;
  --color-border-subtle: #2b3c52;

  --color-accent: #7cb8ff;
  --color-accent-hover: #a3ccff;
  --color-accent-soft: rgba(124, 184, 255, 0.16);
  --color-accent-ring: #7cb8ff;

  --color-success: #5fd07a;
  --color-success-soft: rgba(95, 208, 122, 0.16);
  --color-warning: #f0b93a;
  --color-warning-soft: rgba(240, 185, 58, 0.16);
  --color-danger: #ff7b6e;
  --color-danger-soft: rgba(255, 123, 110, 0.16);
  --color-info: #7cb8ff;
  --color-info-soft: rgba(124, 184, 255, 0.16);
  --color-special: #c99cf5;
  --color-special-soft: rgba(201, 156, 245, 0.16);
  --color-request: #f0b93a;
  --color-request-soft: rgba(240, 185, 58, 0.14);
  --color-request-ink: #f7d27a;

  --color-attr-low: #8d9297;
  --color-attr-mid: #edf3fa;
  --color-attr-good: #cfe07a;
  --color-attr-elite: #6fe08a;
  --color-attr-bar-track: #33475f;
  --color-attr-bar-low: #49627d;
  --color-attr-bar-mid: #8d9297;
  --color-attr-bar-good: #b9cd5a;
  --color-attr-bar-elite: #4fc86c;

  --color-pitch: #2b5d49;
  --color-pitch-line: rgba(255, 255, 255, 0.7);
  --color-pitch-pos: rgba(0, 0, 0, 0.35);
  --color-pitch-pos-natural: #35d35e;
  --color-pitch-pos-accomplished: #b9e14f;
  --color-pitch-pos-competent: #f2c930;
  --color-pitch-pos-unconvincing: #f28a3d;
  --color-pitch-pos-awkward: #9aa0a6;
  --color-pitch-pos-text: #10240f;

  --color-star: #f4c62d;
  --color-star-empty: #49627d;

  --color-result-win: #5fd07a;
  --color-result-draw: #f0b93a;
  --color-result-loss: #ff7b6e;

  --color-skeleton: #21344b;
  --color-skeleton-shine: #33475f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* White: a neutral reading surface from the masthead to the page. */
:root[data-theme="white"] {
  color-scheme: light;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f6f7f9;
  --color-surface-sunken: #f7f8fa;
  --color-surface-hover: #edf2f8;
  --color-surface-overlay: #ffffff;
  --color-surface-inverse: #202d3e;
  --color-text: #202d3e;
  --color-text-secondary: #485566;
  --color-text-muted: #616d7c;
  --color-attr-mid: #202d3e;
  --color-attr-good: #59750d;
  --color-border: #d9dfe7;
  --color-border-strong: #a7b2c0;
  --color-border-subtle: #e4e8ed;

  --masthead-color-scheme: light;
  --color-masthead: #ffffff;
  --color-masthead-raised: #f6f7f9;
  --color-masthead-ink: #202d3e;
  --color-masthead-muted: #616d7c;
  --color-masthead-secondary: #485566;
  --color-masthead-hover: #edf2f8;
  --color-masthead-border: #d9dfe7;
  --color-masthead-border-subtle: #e4e8ed;
  --color-masthead-border-strong: #a7b2c0;
  --color-masthead-accent: #245caa;
  --color-masthead-accent-soft: #e7effa;
  --color-brand-blue: #245caa;
}

/* Black inherits dark semantic colours, with neutral charcoal surfaces. */
:root[data-theme="black"] {
  color-scheme: dark;
  --color-canvas: #000000;
  --color-surface: #111113;
  --color-surface-raised: #1c1c20;
  --color-surface-sunken: #17171a;
  --color-surface-hover: #26262b;
  --color-surface-overlay: #1c1c20;
  --color-surface-inverse: #f4f4f5;
  --color-text: #f4f4f5;
  --color-text-secondary: #d0d0d6;
  --color-text-muted: #ababb5;
  --color-text-faint: #73737e;
  --color-text-inverse: #111113;
  --color-border: #35353d;
  --color-border-strong: #575762;
  --color-border-subtle: #29292f;
  --color-accent: #91bcff;
  --color-accent-hover: #b9d4ff;
  --color-accent-soft: rgba(145, 188, 255, 0.15);
  --color-accent-ring: #91bcff;
  --color-attr-mid: #f4f4f5;
  --color-attr-bar-track: #35353d;
  --color-attr-bar-low: #575762;
  --color-star-empty: #575762;
  --color-skeleton: #1c1c20;
  --color-skeleton-shine: #35353d;

  --masthead-color-scheme: dark;
  --color-masthead: #000000;
  --color-masthead-raised: #1c1c20;
  --color-masthead-ink: #f4f4f5;
  --color-masthead-muted: #ababb5;
  --color-masthead-secondary: #d0d0d6;
  --color-masthead-hover: #26262b;
  --color-masthead-border: #35353d;
  --color-masthead-border-subtle: #29292f;
  --color-masthead-border-strong: #575762;
  --color-masthead-accent: #91bcff;
  --color-masthead-accent-soft: #23334c;
  --color-brand-blue: #91bcff;
}

/* Reduced motion: collapse every duration so transitions become instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}