/* GameWatch — design tokens
   Drop-in replacement for the :root block in static/css/app.css.
   Every value here is taken from the approved mockups in
   "GameWatch Redesign.dc.html", with the corrections the redesign map
   decided (#352 colour system, #370 minted literals). Nothing in the app
   should use a raw colour value that is not defined in this file.

   Translucent fills are one token per job, derived from the palette token
   they tint: color-mix(in srgb, var(--x) N%, transparent) is exactly
   rgba(x, N/100), so a palette change follows and no alpha literal lives
   at a call site. */

:root {
  /* ---- Accent -------------------------------------------------------
     ONE user-settable hue drives every accent state. Lightness and
     chroma are locked so on-accent text stays legible at any hue.
     Default 6deg paints #FF3981, indistinguishable from the approved
     #FF2D7E (348deg would paint magenta). The user's hue arrives as
     html[data-hue="N"] from a static stylesheet, not an inline style. */
  --accent-h: 6;
  --accent-l: 0.68;
  --accent-c: 0.24;

  --accent:        oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-strong: oklch(0.80 0.18 var(--accent-h));   /* hover / links-hover */
  --accent-quiet:  oklch(0.58 0.20 var(--accent-h));   /* pressed, dividers */
  --accent-bg:     color-mix(in oklab, var(--accent) 12%, var(--surface-2));  /* watched card, tracked row */
  --accent-bg-hover: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); /* watched card hover */
  --accent-border: color-mix(in oklab, var(--accent) 55%, var(--border));
  /* Foreground for text/icons ON the accent. Constant: at the locked
     L/C dark text passes AA at every hue and light text fails at every
     hue, so there is no flip. */
  --accent-fg:     var(--bg);

  /* ---- Surfaces ----------------------------------------------------- */
  --bg:        #0B0B0D;  /* page background, outside any panel */
  --surface-0: #0F0F12;  /* nav bar, sidebars, sticky filter bar, table head */
  --surface-1: #131316;  /* main app panel */
  --surface-2: #17171B;  /* cards, rail modules, alternating table rows */
  --surface-3: #1B1B20;  /* nested items inside a card (store buttons) */
  --surface-4: #23232A;  /* platform chips, neutral pills */
  --surface-5: #2A2A31;  /* avatar, toggle track (off) */

  /* ---- Borders ------------------------------------------------------ */
  --border:        #26262C;  /* default: panels, cards, table rules */
  --border-input:  #2C2C32;  /* inputs, filter pills, unselected controls */
  --border-strong: #3A3A44;  /* secondary buttons, countdown chip */
  --border-on-art: color-mix(in srgb, var(--text) 14%, transparent);  /* cover hairline over hero art */

  /* ---- Text --------------------------------------------------------- */
  --text:        #F2F1EE;  /* headings, primary values */
  --text-body:   #DCDBD6;  /* long-form prose (synopsis, alert copy) */
  --text-2:      #C9C9D1;  /* secondary labels, icon strokes */
  --text-3:      #8B8B93;  /* meta, eyebrows, inactive nav */
  --text-4:      #82828A;  /* timestamps, disabled, placeholder; lowest grey passing AA up to --surface-3 */

  /* ---- Fills and washes --------------------------------------------- */
  --text-fill-hover: #FFFFFF;  /* hover background of a --text-filled button */
  --wash-hover:  color-mix(in srgb, var(--text) 4%, transparent);  /* secondary/outline button hover */
  --scrim-chip:  color-mix(in srgb, var(--bg) 55%, transparent);   /* countdown chip over art */
  --scrim-label: color-mix(in srgb, var(--bg) 70%, transparent);   /* date corner label over art */
  --scrim-lightbox: color-mix(in srgb, var(--bg) 94%, transparent);  /* full-size screenshot backdrop */

  /* ---- Status (never re-tinted by the accent) ----------------------- */
  --ok:        #4ADE9B;  /* date confirmed, early access, imminent release */
  --ok-bg:     color-mix(in srgb, var(--ok) 10%, transparent);
  --ok-border: #2F5D45;

  --warn:        #FFB84D;  /* delayed, fuzzy precision, staggered platform, htmx failure */
  --warn-bg:     color-mix(in srgb, var(--warn) 12%, transparent);
  --warn-border: #4A3A1C;
  --warn-row-bg: color-mix(in srgb, var(--warn) 5%, transparent);  /* delayed table row */

  --danger:        #FB8274;  /* cancelled date change, form/auth/flash errors */
  --danger-bg:     color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-border: #472927;

  --unknown: var(--text-3);  /* TBA — greyed, never coloured */

  /* The "Date confirmed" badge and the confirmed glyph. --ok by default;
     html[data-accent-badges] (a preference) swaps them to the accent.
     Only Confirmed: every other --ok use stays --ok. */
  --badge-confirmed:        var(--ok);
  --badge-confirmed-bg:     var(--ok-bg);
  --badge-confirmed-border: var(--ok-border);

  /* ---- Type --------------------------------------------------------- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-ui:      'Archivo', system-ui, -apple-system, sans-serif;

  /* ---- Radius ------------------------------------------------------- */
  --r-chip:   3px;  /* platform chips, inline badges */
  --r-badge:  4px;  /* genre pills, thumbnails, corner labels */
  --r-input:  5px;  /* small buttons, icon buttons, table thumbs */
  --r-ctl:    6px;  /* buttons, inputs, filter pills, media */
  --r-card:   7px;  /* small list cards */
  --r-panel:  8px;  /* cards, tables, media frames */
  --r-app:   10px;  /* app panel, big modules */
  --r-phone: 26px;  /* mobile frame */

  /* ---- Spacing (4px base; these are the values actually used) ------- */
  --s-1:  4px;  --s-2:  6px;  --s-3:  8px;  --s-4: 10px;
  --s-5: 12px;  --s-6: 14px;  --s-7: 16px;  --s-8: 18px;
  --s-9: 20px;  --s-10: 22px; --s-11: 24px; --s-12: 28px;
  --s-13: 32px; --s-14: 34px; --s-15: 40px; --s-16: 48px;

  /* ---- Layout ------------------------------------------------------- */
  --nav-h:        64px;
  --page-pad-x:   28px;  /* desktop gutter inside the app panel */
  --page-pad-x-m: 18px;  /* mobile gutter */
  --rail-w:       306px; /* radar right rail */
  --rail-w-detail:344px; /* detail page right rail */
  --month-rail-w: 132px; /* browse month jump rail */
  --settings-nav-w:212px;
  --content-max:  1280px;

  /* ---- Elevation (used sparingly; this design leans on borders) ----- */
  --shadow-handle: 0 2px 8px rgba(0, 0, 0, 0.5);   /* picker handle only */
  --scrim-bottom:  linear-gradient(to top,
                     color-mix(in srgb, var(--surface-1) 96%, transparent) 6%,
                     color-mix(in srgb, var(--surface-1) 25%, transparent) 60%,
                     transparent);
}

/* The accent tokens are re-derived for any element carrying data-hue, not just <html>.
   A custom property resolves where it is declared, so without this a preset swatch or a
   live preview scoped to <div data-hue="180"> would override --accent-h locally and still
   paint the page's accent. On <html> these are the same declarations as above. */
[data-hue] {
  --accent:          oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-strong:   oklch(0.80 0.18 var(--accent-h));
  --accent-quiet:    oklch(0.58 0.20 var(--accent-h));
  --accent-bg:       color-mix(in oklab, var(--accent) 12%, var(--surface-2));
  --accent-bg-hover: color-mix(in oklab, var(--accent) 18%, var(--surface-2));
  --accent-border:   color-mix(in oklab, var(--accent) 55%, var(--border));
}

html[data-accent-badges] {
  --badge-confirmed:        var(--accent);
  --badge-confirmed-bg:     var(--accent-bg);
  --badge-confirmed-border: var(--accent-border);
}

/* Art placeholders — replace with real IGDB imagery.
   Keep the dark-to-dark diagonal so title text stays readable
   before the image loads and if the image 404s. */
.art-fallback {
  background: linear-gradient(155deg, #39182C, #171826);
}