/*──────────────────────────────────────────────
 * Pols — shared Material 3 design tokens
 *
 * SINGLE SOURCE OF TRUTH for the M3 token vocabulary used by BOTH
 * stylesheets: pols.css (participant + presenter live views) and
 * pols-app.css (dashboard, editor, settings, presenters, network, auth).
 *
 * Loaded BEFORE pols.css / pols-app.css on every surface:
 *   - Frontend::render_head()  → every /pols/* page (incl. auth shells)
 *   - participant.php / presenter.php → the live views
 *
 * No build step: this is a third <link>, not an @import.
 *
 * COLOUR (alpha.71). The --md-sys-color-* roles hold the values; everything
 * else is an alias onto them. Per site, Branding::render_css_vars() prints an
 * inline <style> after this file with the institution's tonal roles:
 *   - app pages: the light BRAND roles only — the app is pinned light and
 *     keeps the neutral surface ladder below (no app dark theme yet);
 *   - live views: the full light scheme on :root, plus the dark scheme under
 *     @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) and
 *     :root[data-theme="dark"].
 * The values below are the static fallbacks for the default seeds
 * (#1a6e7a / #e88c2a / #2e7d32), computed by Branding::build_schemes();
 * tools/check-tonal-contrast.php fails when they drift from it.
 *
 * SCOPING — read before adding an alias. A custom property that holds a
 * var() is resolved on the element that DECLARES it, and descendants inherit
 * the resolved value. The scheme therefore lives on :root (the <html> that
 * carries data-theme) and every alias is declared on :root too; never
 * redeclare a role or an --m3-* value on <body> or a page wrapper, or the
 * aliases above it freeze the other scheme's values.
 *────────────────────────────────────────────*/

:root {
    color-scheme: light;

    /* md-sys brand roles — light (tone 40 / 100 / 90 / 10 of each seed). */
    --md-sys-color-primary:                      #106874;
    --md-sys-color-on-primary:                   #ffffff;
    --md-sys-color-primary-container:            #a2effc;
    --md-sys-color-on-primary-container:         #001f24;
    --md-sys-color-secondary:                    #8d4f00;
    --md-sys-color-on-secondary:                 #ffffff;
    --md-sys-color-secondary-container:          #ffdcbf;
    --md-sys-color-on-secondary-container:       #2e1500;
    --md-sys-color-tertiary:                     #1b6d21;
    --md-sys-color-on-tertiary:                  #ffffff;
    --md-sys-color-tertiary-container:           #a5f5a4;
    --md-sys-color-on-tertiary-container:        #002202;
    --md-sys-color-inverse-primary:              #86d2df;
    --md-sys-color-surface-tint:                 #106874;

    /* md-sys surface roles — light. The app's neutral ladder (unchanged since
       Phase M3); the live views replace it with the tonal neutral palette. */
    --md-sys-color-surface:                      #FBFCFE;
    --md-sys-color-surface-dim:                  #DCDFE3;
    --md-sys-color-surface-bright:               #FBFCFE;
    --md-sys-color-surface-container-lowest:     #FFFFFF;
    --md-sys-color-surface-container-low:        #F4F6F8;
    --md-sys-color-surface-container:            #EDF0F3;
    --md-sys-color-surface-container-high:       #E7EAED;
    --md-sys-color-surface-container-highest:    #E1E4E7;
    --md-sys-color-on-surface:                   #1A1C1F;
    --md-sys-color-on-surface-variant:           #44474B;
    --md-sys-color-outline:                      #74787C;
    --md-sys-color-outline-variant:              #C4C7CB;
    --md-sys-color-inverse-surface:              #2E3134;
    --md-sys-color-inverse-on-surface:           #EFF1F3;

    /* Fixed semantic roles — never institution-branded (Branding::SEMANTIC_LIGHT;
       the dark scheme swaps in Branding::SEMANTIC_DARK). */
    --md-sys-color-error:                        #ba1a1a;
    --md-sys-color-on-error:                     #ffffff;
    --md-sys-color-error-container:              #ffdad6;
    --md-sys-color-on-error-container:           #410002;
    --pols-success:                              #2e6b34;   /* white on it: 6.4:1 */
    --pols-on-success:                           #ffffff;
    --pols-success-container:                    #b7f1b9;
    --pols-on-success-container:                 #00210a;

    /* Leaderboard medals, text-safe on the light surfaces (≥ 4.5:1). The
       dark scheme swaps in the bright set. */
    --pols-rank-gold:                            #7a5c00;
    --pols-rank-silver:                          #5c6467;
    --pols-rank-bronze:                          #7a4a1e;

    /* "R, G, B" triples of the brand roles, for rgba() tints (a hex alias
       cannot be split). Re-emitted per scheme by Branding::render_css_vars(). */
    --pols-primary-rgb:                          16, 104, 116;
    --pols-secondary-rgb:                        141, 79, 0;
    --pols-tertiary-rgb:                         27, 109, 33;

    /* The bands (app bar, presenter and participant headers, points bar):
       the raw seeds on light, with their on-colours. The dark scheme below
       re-declares them with Branding::band_seed()'s darker shade (alpha.87). */
    --pols-brand-seed:                           #1a6e7a;
    --pols-brand-seed-on:                        #ffffff;
    --pols-brand-seed-on-rgb:                    255, 255, 255;
    --pols-brand-secondary-seed:                 #e88c2a;
    --pols-brand-secondary-seed-on:              #1b2733;
    --pols-brand-secondary-seed-rgb:             232, 140, 42;
    --pols-header-chip-on:                       #ffffff;
    --pols-header-chip-interactief-on:           #ffffff;
    --pols-header-logo-plate-bg:                 rgba(255,255,255,0.92);
    --pols-header-logo-plate-pad:                4px;

    /* Material 3 shorthand used by both stylesheets — aliases of the roles. */
    --m3-surface:                       var(--md-sys-color-surface);
    --m3-surface-dim:                   var(--md-sys-color-surface-dim);
    --m3-surface-bright:                var(--md-sys-color-surface-bright);
    --m3-surface-container-lowest:      var(--md-sys-color-surface-container-lowest);
    --m3-surface-container-low:         var(--md-sys-color-surface-container-low);
    --m3-surface-container:             var(--md-sys-color-surface-container);
    --m3-surface-container-high:        var(--md-sys-color-surface-container-high);
    --m3-surface-container-highest:     var(--md-sys-color-surface-container-highest);
    --m3-on-surface:                    var(--md-sys-color-on-surface);
    --m3-on-surface-variant:            var(--md-sys-color-on-surface-variant);
    --m3-outline:                       var(--md-sys-color-outline);
    --m3-outline-variant:               var(--md-sys-color-outline-variant);

    /* State layers (light) — rgba of on-surface (per scheme on the live
       views). M3 Expressive contract: hover 8% / focus 10% / pressed 12%. */
    --m3-state-hover:    rgba(26, 28, 31, 0.08);
    --m3-state-focus:    rgba(26, 28, 31, 0.10);
    --m3-state-pressed:  rgba(26, 28, 31, 0.12);

    /* Shape scale */
    --m3-shape-xs:   4px;
    --m3-shape-sm:   8px;
    --m3-shape-md:   12px;
    --m3-shape-lg:   16px;
    --m3-shape-xl:   24px;
    --m3-shape-xxl:  28px;
    --m3-shape-full: 999px;

    /* Elevation (M3-style: very subtle, layered, low blur) */
    --m3-elev-0: none;
    --m3-elev-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
    --m3-elev-2: 0 1px 2px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.06);
    --m3-elev-3: 0 4px 6px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.08);

    /* Neutral bars (alpha.89, <html data-bars="neutral">): the presenter
       bars' mild drop shadow as a box-shadow, for a white bar that stands on
       a near-white page — the app bar, the phone header, the preview's. */
    --pols-band-shadow:    0 3px 5px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    --pols-band-shadow-up: 0 -3px 5px rgba(0,0,0,0.11), 0 -1px 2px rgba(0,0,0,0.06);

    /* Motion (alpha.72) — M3 Expressive easings, springs and durations.
       The springs are linear() curves; the values here are cubic-bezier
       stand-ins for a browser without linear() (Safari < 17.2), replaced by
       the @supports block below the :root rules. A var() holding an
       unsupported linear() would make the whole animation declaration
       invalid, not just its easing. */
    --md-sys-motion-easing-standard:          cubic-bezier(.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decel:  cubic-bezier(.05, .7, .1, 1);
    --md-sys-motion-easing-emphasized-accel:  cubic-bezier(.3, 0, .8, .15);
    --md-sys-motion-spring-fast-spatial:      cubic-bezier(.34, 1.4, .64, 1);
    --md-sys-motion-spring-default-effects:   cubic-bezier(.3, .9, .4, 1);
    --md-sys-motion-duration-short:           150ms;
    --md-sys-motion-duration-medium:          300ms;
    --md-sys-motion-duration-long:            500ms;
    --md-sys-motion-duration-extra-long:      700ms;

    /* Legacy motion names, kept for one release. The easings alias the
       md-sys curves they always were; --m3-easing-decelerate has no M3
       counterpart and keeps its value. The --m3-duration-* values are
       unchanged on purpose: pointing them at the md-sys durations would
       retime every transition in both stylesheets (250 → 300 ms,
       400 → 500 ms). New code uses --md-sys-motion-*. */
    --m3-easing-standard:    var(--md-sys-motion-easing-standard);
    --m3-easing-emphasized:  var(--md-sys-motion-easing-emphasized-decel);
    --m3-easing-decelerate:  cubic-bezier(0, 0, 0, 1);
    --m3-duration-short:     150ms;
    --m3-duration-medium:    250ms;
    --m3-duration-long:      400ms;

    /* Type (alpha.72) — the fifteen M3 roles plus two emphasized variants.
       Each role is the <weight> <size>/<line-height> prefix of the CSS
       `font` shorthand, with its tracking as an -ls twin:

           font: var(--md-sys-type-title-md) var(--pols-font);
           letter-spacing: var(--md-sys-type-title-md-ls);

       The shorthand resets font-variant-numeric and font-style: restate
       tabular-nums or italic AFTER the `font:` line. Tabular figures are
       for a number that changes in place while it is watched (the
       countdown, a live count, the scale readout; on the count's own span,
       not a label around it) and for a column of numbers (alpha.94); a
       label with words or a number drawn once keeps proportional figures.
       In DM Sans tnum swaps the ten digits only (alpha.94: its punctuation
       and space were a full figure wide). Every role has its -ls
       twin (0 where M3 tracks 0), so letter-spacing never falls back to the
       parent's. title-lg is weight 500 (M3 says 400) on purpose. The live
       views re-map some roles for the hall on .pols-presenter-main
       (pols.css); the values below are the phone and app sizes.
       --pols-font is the institution's family (Branding::render_css_vars()
       overrides it); --pols-font-display is the platform's display serif,
       used only by the presenter's lobby and end-screen headlines, and it
       follows --pols-font whenever the institution has a font of its own. */
    --pols-font:                          'DM Sans', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --pols-font-display:                  'DM Serif Display', Georgia, serif;
    --md-sys-type-display-lg:             400 57px/64px;
    --md-sys-type-display-lg-ls:          -0.25px;
    --md-sys-type-display-md:             400 45px/52px;
    --md-sys-type-display-md-ls:          0px;
    --md-sys-type-display-sm:             400 36px/44px;
    --md-sys-type-display-sm-ls:          0px;
    --md-sys-type-headline-lg:            400 32px/40px;
    --md-sys-type-headline-lg-ls:         0px;
    --md-sys-type-headline-md:            400 28px/36px;
    --md-sys-type-headline-md-ls:         0px;
    --md-sys-type-headline-sm:            400 24px/32px;
    --md-sys-type-headline-sm-ls:         0px;
    --md-sys-type-title-lg:               500 22px/28px;
    --md-sys-type-title-lg-ls:            0px;
    --md-sys-type-title-md:               500 16px/24px;
    --md-sys-type-title-md-ls:            0.15px;
    --md-sys-type-title-sm:               500 14px/20px;
    --md-sys-type-title-sm-ls:            0.1px;
    --md-sys-type-body-lg:                400 16px/24px;
    --md-sys-type-body-lg-ls:             0.5px;
    --md-sys-type-body-md:                400 14px/20px;
    --md-sys-type-body-md-ls:             0.25px;
    --md-sys-type-body-sm:                400 12px/16px;
    --md-sys-type-body-sm-ls:             0.4px;
    --md-sys-type-label-lg:               500 14px/20px;
    --md-sys-type-label-lg-ls:            0.1px;
    --md-sys-type-label-md:               500 12px/16px;
    --md-sys-type-label-md-ls:            0.5px;
    --md-sys-type-label-sm:               500 11px/16px;
    --md-sys-type-label-sm-ls:            0.5px;
    --md-sys-type-headline-lg-emphasized:    700 32px/40px;
    --md-sys-type-headline-lg-emphasized-ls: 0px;
    --md-sys-type-title-lg-emphasized:       700 22px/28px;
    --md-sys-type-title-lg-emphasized-ls:    0px;

    /* Legacy brand names — aliases of the roles for one release (alpha.71
       flipped the direction; Branding::render_css_vars() re-declares them
       inline, last in the cascade). Text and fills on them are tone 40 on
       light, tone 80 on dark, with a guaranteed on-colour. */
    --pols-primary:                var(--md-sys-color-primary);
    --pols-primary-on:             var(--md-sys-color-on-primary);
    --pols-primary-container:      var(--md-sys-color-primary-container);
    --pols-on-primary-container:   var(--md-sys-color-on-primary-container);
    --pols-secondary:              var(--md-sys-color-secondary);
    --pols-secondary-on:           var(--md-sys-color-on-secondary);
    --pols-secondary-container:    var(--md-sys-color-secondary-container);
    --pols-on-secondary-container: var(--md-sys-color-on-secondary-container);
    --pols-accent:                 var(--md-sys-color-secondary);
    --pols-accent-on:              var(--md-sys-color-on-secondary);
    --pols-tertiary:               var(--md-sys-color-tertiary);
    --pols-tertiary-on:            var(--md-sys-color-on-tertiary);
    --pols-tertiary-container:     var(--md-sys-color-tertiary-container);
    --pols-on-tertiary-container:  var(--md-sys-color-on-tertiary-container);
    --pols-surface-tint:           var(--md-sys-color-surface-tint);

    /* The live views' "bright" accent (timer, countdown, presenter CTA).
       Before alpha.71 Branding emitted a lightened seed on dark and the raw
       seed on light; now it is the active scheme's secondary role. (The
       primary / tertiary bright variants fed only the presenter mode chips,
       which use the container roles since alpha.71.) */
    --pols-accent-bright:          var(--md-sys-color-secondary);
    --pols-accent-bright-on:       var(--md-sys-color-on-secondary);

    /* Short names the app stylesheet has used since Phase 4c. Until alpha.70
       they were never defined, so every use drew its own hex fallback (#888
       and #ccc text at 3.5:1 / 1.6:1, #e4e7eb dividers). */
    --pols-muted:                  var(--md-sys-color-on-surface-variant);
    --pols-divider:                var(--md-sys-color-outline-variant);
}

/* The real springs, where linear() is understood (Chromium 113+, Safari
   17.2+, Firefox 112+). */
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --md-sys-motion-spring-fast-spatial:     linear(0, .52 12%, .92 24%, 1.04 36%, 1 52%, 1);
        --md-sys-motion-spring-default-effects:  linear(0, .76 20%, 1 48%, 1);
    }
}

/* Reduced motion: every md-sys duration is zero. pols.css and pols-app.css
   keep their global 0.01ms !important guards on top (0.01ms, not 0, so an
   animationend listener still fires); the JS that sequences motion (screen
   swaps, FLIP, chart animation) checks the same media query itself. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --md-sys-motion-duration-short:      0ms;
        --md-sys-motion-duration-medium:     0ms;
        --md-sys-motion-duration-long:       0ms;
        --md-sys-motion-duration-extra-long: 0ms;
    }
}

/*──────────────────────────────────────────────
 * Dark scheme — static fallback for <html data-theme="dark"> (the presenter
 * on its default theme). The live views' inline block re-emits it with the
 * institution's palette, and also under prefers-color-scheme for a phone
 * without a forced theme; app pages never carry data-theme="dark".
 *────────────────────────────────────────────*/
:root[data-theme="dark"] {
    color-scheme: dark;

    --md-sys-color-primary:                      #86d2df;
    --md-sys-color-on-primary:                   #00363d;
    --md-sys-color-primary-container:            #004f58;
    --md-sys-color-on-primary-container:         #a2effc;
    --md-sys-color-secondary:                    #ffb778;
    --md-sys-color-on-secondary:                 #4b2700;
    --md-sys-color-secondary-container:          #6b3b00;
    --md-sys-color-on-secondary-container:       #ffdcbf;
    --md-sys-color-tertiary:                     #8ad989;
    --md-sys-color-on-tertiary:                  #003a06;
    --md-sys-color-tertiary-container:           #00530c;
    --md-sys-color-on-tertiary-container:        #a5f5a4;
    --md-sys-color-surface:                      #0d1516;
    --md-sys-color-surface-dim:                  #0d1516;
    --md-sys-color-surface-bright:               #323b3c;
    --md-sys-color-surface-container-lowest:     #080f11;
    --md-sys-color-surface-container-low:        #151d1e;
    --md-sys-color-surface-container:            #192122;
    --md-sys-color-surface-container-high:       #232b2d;
    --md-sys-color-surface-container-highest:    #2e3638;
    --md-sys-color-on-surface:                   #dae4e6;
    --md-sys-color-on-surface-variant:           #b5cace;
    --md-sys-color-outline:                      #809498;
    --md-sys-color-outline-variant:              #374a4d;
    --md-sys-color-inverse-surface:              #dae4e6;
    --md-sys-color-inverse-on-surface:           #293233;
    --md-sys-color-inverse-primary:              #106874;
    --md-sys-color-surface-tint:                 #86d2df;

    --pols-primary-rgb:                          134, 210, 223;
    --pols-secondary-rgb:                        255, 183, 120;
    --pols-tertiary-rgb:                         138, 217, 137;

    /* The bands on dark: a seed lighter than tone 40 at tone 40 (alpha.87). */
    --pols-brand-seed:                           #106874;
    --pols-brand-seed-on:                        #ffffff;
    --pols-brand-seed-on-rgb:                    255, 255, 255;
    --pols-brand-secondary-seed:                 #8d4f00;
    --pols-brand-secondary-seed-on:              #ffffff;
    --pols-brand-secondary-seed-rgb:             141, 79, 0;
    --pols-header-chip-on:                       #ffffff;
    --pols-header-chip-interactief-on:           #ffffff;

    --m3-state-hover:    rgba(218, 228, 230, 0.08);
    --m3-state-focus:    rgba(218, 228, 230, 0.12);
    --m3-state-pressed:  rgba(218, 228, 230, 0.12);

    /* Branding::SEMANTIC_DARK + FIXED_DARK */
    --md-sys-color-error:                        #ffb4ab;
    --md-sys-color-on-error:                     #690005;
    --md-sys-color-error-container:              #93000a;
    --md-sys-color-on-error-container:           #ffdad6;
    --pols-success:                              #7fd68a;
    --pols-on-success:                           #003910;
    --pols-rank-gold:                            #e6c200;
    --pols-rank-silver:                          #c9ced1;
    --pols-rank-bronze:                          #e0a070;
    --pols-logo-plate-bg:                        rgba(255,255,255,0.92);
    --pols-logo-plate-pad:                       5px;
    --pols-danger-text:                          #ffb4ab;
    --pols-danger-bg:                            rgba(212,32,39,0.16);
}