/* =============================================================================
   Theme — every colour, size and motion value the kiosk uses.

   Two layers, same split as design-system/:
     1. Palette   — raw Ei hexes, copied from design-system/tokens/color-tokens.md.
                    Names carry no meaning.
     2. Theme     — [data-theme="…"] assigns meaning (ocean, land, marker…).
                    The map (WebGL) reads these too: js/app.js pulls them with
                    getComputedStyle, so a theme change repaints the map as well.

   To add a theme, copy the "daylight" block, rename it, change values, and set
   <html data-theme="yourname">. Nothing else references hexes.
   ============================================================================= */

:root {
  /* --- Palette (raw) ------------------------------------------------------ */
  --ei-red:          #9f1d21;   /* sampled from design-system/logos/ei/red.png */

  --grey-100: #18181c;  --grey-90: #41454a;  --grey-80: #6b7481;  --grey-70: #808b9a;
  --grey-60:  #a1aab6;  --grey-50: #bcc3cc;  --grey-40: #d3dbe4;  --grey-30: #ebf0f5;
  --grey-20:  #f1f5f9;  --grey-10: #f8fafc;  --grey-white: #ffffff;

  --blue-80: #0c3755;  --blue-70: #0b66a3;  --blue-60: #48a2df;  --blue-50: #6db5e5;
  --blue-40: #91c7ec;  --blue-30: #a3d0ef;  --blue-20: #c8e3f5;  --blue-10: #edf6fc;

  --orange-70: #ac4413;  --orange-60: #f88a56;  --orange-30: #fbc4aa;
  --orange-20: #fddccc;  --orange-10: #fef3ee;

  --teal-primary:    #0e9289;  --teal-dark:    #01766f;
  --fuchsia-primary: #f263a2;  --fuchsia-dark: #e65796;  --fuchsia-light: #ffb9d8;

  --yellow-80: #713f12;  --yellow-30: #fff29d;  --yellow-10: #fffceb;
}

/* --- Daylight: the default. ------------------------------------------------
   Built for a bright room with a light wall behind a dark-bezelled TV. A dark UI
   there fights the ambient light (glare, reflections, eyes adapted to the bright
   wall make dark content look murky), so the surface stays light and contrast is
   carried by ink weight and the red markers, not by darkness. Lines are thicker
   than a desktop map would use: the screen is read from a step back, often at
   an angle. */
:root,
[data-theme="daylight"] {
  /* Text — consumed by typography-tokens.css */
  --text-primary:   var(--grey-100);
  --text-secondary: var(--grey-90);   /* one step darker than desktop grey-80: glare */
  --text-tertiary:  var(--grey-80);

  /* Page */
  --page-bg:             var(--grey-10);
  --chrome-surface:      rgba(255, 255, 255, 0.92);
  --chrome-border:       var(--grey-40);
  --chrome-shadow:       0 10px 40px rgba(24, 24, 28, 0.10);
  --scrim:               rgba(24, 24, 28, 0.06);   /* barely there: the map beside the sheet stays readable */

  /* Map — read by js/app.js */
  --map-ocean:           var(--blue-20);
  --map-land:            var(--grey-white);
  --map-land-footprint:  var(--orange-20);    /* countries where Ei works */
  --map-land-selected:   var(--orange-30);
  --map-border:          var(--grey-50);
  --map-border-width:    1.2;                 /* px, unitless for WebGL */
  --map-footprint-edge:  var(--orange-60);
  --map-footprint-edge-width: 1.6;

  /* Markers */
  --marker-color:        var(--ei-red);
  --marker-ring:         var(--grey-white);
  --marker-glow:         rgba(159, 29, 33, 0.35);
  --marker-label-ink:    var(--grey-100);
  --marker-label-bg:     rgba(255, 255, 255, 0.94);
  --marker-label-border: var(--grey-40);
  --marker-size-country:  34px;
  --marker-size-state:    26px;
  --marker-size-district: 20px;
  --marker-size-city:     20px;
  --marker-hit:          72px;    /* invisible touch target around every dot */
  --marker-pulse-dur:    2.6s;

  /* Actions — Ei rules: teal = primary action, fuchsia = back / selection */
  --action-primary:      var(--teal-primary);
  --action-primary-ink:  var(--grey-white);
  --action-back:         var(--fuchsia-primary);
  --action-back-ink:     var(--grey-white);
  --action-back-edge:    var(--fuchsia-dark);
  --focus-ring:          var(--teal-primary);
  --chip-bg:             var(--grey-white);
  --chip-border:         var(--grey-40);
  --chip-ink:            var(--grey-90);
  --chip-selected-bg:    var(--grey-100);
  --chip-selected-ink:   var(--grey-white);

  /* Info chips (metadata: product, programme) — Ei "info" family */
  --info-bg:     var(--blue-10);
  --info-border: var(--blue-30);
  --info-ink:    var(--blue-70);

  /* "Sample content" warning — Ei gold family */
  --sample-bg:     var(--yellow-10);
  --sample-border: var(--yellow-30);
  --sample-ink:    var(--yellow-80);

  /* Detail sheet */
  --sheet-width:      min(58vw, 1100px);
  --sheet-surface:    var(--grey-white);
  --sheet-hero-bg:    var(--grey-20);
  --sheet-accent:     var(--ei-red);       /* thin brand rule under the title */

  /* Kiosk geometry — touch targets sized for a finger on a wall-mounted TV */
  --touch-min:        72px;
  --gutter:           clamp(20px, 2.2vw, 48px);
  --radius-chrome:    20px;

  /* Motion */
  --ease-out:         cubic-bezier(.2, .7, .3, 1);
  --dur-sheet:        420ms;
  --dur-fly-ms:       1800;   /* unitless: JS reads it for map.flyTo */
  --idle-after-ms:    90000;  /* back to home + attract loop after this long untouched */
  --attract-step-ms:  7000;
}