/* FS World design tokens: light + dark. Source: docs/design/tokens.css, DESIGN.md §2, §10.
   Light: :root. Dark (screens only): data-theme="dark" (explicit choice) or Auto
   (no data-theme) with prefers-color-scheme: dark. data-theme is set by the
   inline script at the top of <head> (static/script/theme.js).
   .theme-light declares the light values again: content that stays light in
   both themes (the 404 photo and its car, the logo specimens on the brand page). */

:root, .theme-light {
  color-scheme: light;
  /* brand */
  --color-fs-world: #1B78FF;          /* bars, borders, fills – never text < 18 px */
  --color-main-dark: #0045AA;         /* gradient start */
  --color-link: #0045AA;              /* links, active nav text */
  --color-selected: #0045AA;          /* selected segment / primary button fill (white text) */
  --color-fs-world-light: #DDEEFF;    /* state rows: current / selected / find match */
  --gradient-line: linear-gradient(90deg, #0045AA 0%, #1B78FF 100%);
  /* surfaces */
  --color-surface: #FFFFFF;           /* page, bar, filter row, tables */
  --color-raised: #FFFFFF;            /* dropdowns, popups, floating map controls, chips */
  --color-row-alt: #F8F9FB;
  --color-gray-light: #F1F5F9;        /* table head, subtotals, totals */
  --color-gray-mid: #DAE0E4;          /* borders */
  /* text */
  --color-text: #1F2937;
  --color-gray-dark: #3D424E;         /* text and icons only, never a state fill */
  --color-gray: #6B7280;
  --color-on-fill: #FFFFFF;           /* text and icons on Selected / Main Dark / error fills */
  --color-tooltip-bg: #1F2937;        /* tooltip background (text: --color-on-fill) */
  --color-scrim: #1F2937;             /* backdrops behind sheets and dialogs (mixed with transparent), popover shadows */
  /* status */
  --color-error: #CC2222;
  --color-error-text: #CC2222;
  --color-error-light: #FDE8E8;       /* error notice background */
  --color-success-light: #EAF4D8;     /* success notice background */
  --color-rank-up: #1E7B34;          /* rank change up (text, 11 px); down uses --color-error-text */
  --color-notice: #FFF6CC;
  --color-notice-text: #6B5B00;
  /* medals */
  --color-medal-gold: #B8860B;
  --color-medal-silver: #7C8794;
  --color-medal-bronze: #8C4A23;
  /* maps and charts */
  --color-map-land: #FFFFFF;
  --color-map-water: #DDEEFF;
  --color-casing: #FFFFFF;
  /* aliases (no own colour): chart casing and dot rings, chart grid, empty map */
  --color-chart-casing: var(--color-gray-dark);
  --color-chart-grid: var(--color-gray-light);
  --color-map-bg: #DDDDDD;            /* Leaflet's container grey, shown before tiles load */
  /* Leaflet's own defaults (leaflet.css), restated so dark mode can replace them */
  --color-leaflet-text: #222222;      /* default tooltips */
  --color-leaflet-line: #CCCCCC;      /* divider between the zoom buttons */
  --color-leaflet-hover: #F4F4F4;     /* zoom button hover, disabled */
  --color-leaflet-disabled: #BBBBBB;
  --color-leaflet-muted: #757575;     /* popup close button */
  --color-leaflet-link: #0078A8;      /* attribution links */
  --color-leaflet-attribution: rgba(255, 255, 255, 0.8);
  --color-leaflet-attribution-text: #333333;
  /* Flunkyball beer badge (F1 / MF1): duotone fa-beer-mug, mug + foam; same in dark mode */
  --color-flunkyball-badge: #E0A800;
  --color-flunkyball-foam: #FFFFFF;
  /* class colours – identical in both themes, always dark text */
  --color-class-cv: #76B828;
  --color-class-ev: #FFDD00;
  --color-class-dc: #5EC4E1;
  --color-class-text: #1F2937;
  /* shape and size */
  --radius-data: 0;
  --radius-sm: 4px;
  --radius: 8px;
  --control-h: 40px;
  --control-border: 2px;
  --line-h: 4px;
  --bar-h: 64px;
  --active-underline: 3px;
  /* shadows (only what floats); dark mode lifts floating parts with --color-raised */
  --shadow-dialog: 0 0 18px -5px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 14px rgba(15, 23, 42, 0.15);
  --shadow-popover: 0 8px 24px color-mix(in srgb, var(--color-scrim) 18%, transparent);
  --shadow-floating: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-map-control: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-map-dot: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-marker: 0 0 3px rgba(0, 0, 0, 0.5);       /* drop-shadow() of a highlighted flag */
  --shadow-toast: 0 2px 16px rgba(0, 0, 0, 0.12);
  --shadow-photo-text: 0 0 5px rgba(0, 0, 0, 1);     /* text on photos, same in both themes */
}

@media (max-width: 800px) {
  :root { --bar-h: 56px; }
}

/* Dark (screens only): explicit choice, or Auto + system dark. Print stays light.
   The two blocks carry the same values (CSS cannot share them without a build step). */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-link: #7AB0FF;
    --color-selected: #2563CC;
    --color-fs-world-light: #173A63;
    --color-surface: #151B23;
    --color-raised: #1C2430;
    --color-row-alt: #1A212B;
    --color-gray-light: #212A36;
    --color-gray-mid: #2E3846;
    --color-text: #E6EAF0;
    --color-gray-dark: #C3CAD4;
    --color-gray: #9AA4B2;
    --color-tooltip-bg: #2E3846;
    --color-scrim: #000000;
    --color-error-text: #FF6B6B;
    --color-error-light: #3A1A1D;
    --color-success-light: #1F3318;
    --color-rank-up: #5CC47A;
    --color-notice: #3A3210;
    --color-notice-text: #F0D66A;
    --color-medal-gold: #E0B23A;
    --color-medal-silver: #B3BDC9;
    --color-medal-bronze: #C26E3A;
    --color-map-land: #2B3542;
    --color-map-water: #0B121A;
    --color-casing: #0F141A;
    --color-chart-casing: var(--color-casing);
    --color-chart-grid: var(--color-gray-mid);
    --color-map-bg: var(--color-map-water);
    --color-leaflet-text: var(--color-text);
    --color-leaflet-line: var(--color-gray-mid);
    --color-leaflet-hover: var(--color-gray-light);
    --color-leaflet-disabled: var(--color-gray);
    --color-leaflet-muted: var(--color-gray);
    --color-leaflet-link: var(--color-link);
    --color-leaflet-attribution: color-mix(in srgb, var(--color-raised) 80%, transparent);
    --color-leaflet-attribution-text: var(--color-gray-dark);
    --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-link: #7AB0FF;
    --color-selected: #2563CC;
    --color-fs-world-light: #173A63;
    --color-surface: #151B23;
    --color-raised: #1C2430;
    --color-row-alt: #1A212B;
    --color-gray-light: #212A36;
    --color-gray-mid: #2E3846;
    --color-text: #E6EAF0;
    --color-gray-dark: #C3CAD4;
    --color-gray: #9AA4B2;
    --color-tooltip-bg: #2E3846;
    --color-scrim: #000000;
    --color-error-text: #FF6B6B;
    --color-error-light: #3A1A1D;
    --color-success-light: #1F3318;
    --color-rank-up: #5CC47A;
    --color-notice: #3A3210;
    --color-notice-text: #F0D66A;
    --color-medal-gold: #E0B23A;
    --color-medal-silver: #B3BDC9;
    --color-medal-bronze: #C26E3A;
    --color-map-land: #2B3542;
    --color-map-water: #0B121A;
    --color-casing: #0F141A;
    --color-chart-casing: var(--color-casing);
    --color-chart-grid: var(--color-gray-mid);
    --color-map-bg: var(--color-map-water);
    --color-leaflet-text: var(--color-text);
    --color-leaflet-line: var(--color-gray-mid);
    --color-leaflet-hover: var(--color-gray-light);
    --color-leaflet-disabled: var(--color-gray);
    --color-leaflet-muted: var(--color-gray);
    --color-leaflet-link: var(--color-link);
    --color-leaflet-attribution: color-mix(in srgb, var(--color-raised) 80%, transparent);
    --color-leaflet-attribution-text: var(--color-gray-dark);
    --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
}