/*──────────────────────────────────────────────
 * 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.
 * Institution branding (--pols-primary etc.) is injected per-site as an
 * inline <style> by Branding::render_css_vars() and layers on top.
 *────────────────────────────────────────────*/

:root {
    /* Material 3 — light tonal surface ladder */
    --m3-surface:                       #FBFCFE;
    --m3-surface-dim:                   #DCDFE3;
    --m3-surface-bright:                #FBFCFE;
    --m3-surface-container-lowest:      #FFFFFF;
    --m3-surface-container-low:         #F4F6F8;
    --m3-surface-container:             #EDF0F3;
    --m3-surface-container-high:        #E7EAED;
    --m3-surface-container-highest:     #E1E4E7;

    /* Material 3 — on-surface roles (light) */
    --m3-on-surface:                    #1A1C1F;
    --m3-on-surface-variant:            #44474B;
    --m3-outline:                       #74787C;
    --m3-outline-variant:               #C4C7CB;

    /* State layers (light) — rgba of on-surface.
       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);

    /* Motion */
    --m3-easing-standard:    cubic-bezier(0.2, 0, 0, 1);
    --m3-easing-emphasized:  cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --m3-easing-decelerate:  cubic-bezier(0, 0, 0, 1);
    --m3-duration-short:     150ms;
    --m3-duration-medium:    250ms;
    --m3-duration-long:      400ms;

    /* Type scale (DM Sans; weights via the variable font).
       Each token is the <weight> <size>/<line-height> prefix of the CSS
       `font` shorthand — compose with the family:
           font: var(--m3-type-title) var(--pols-font);             */
    --m3-type-display:  600 32px/1.2;
    --m3-type-headline: 600 24px/1.25;
    --m3-type-title:    600 18px/1.3;
    --m3-type-body:     400 15px/1.5;
    --m3-type-label:    500 13px/1.3;
    --m3-type-label-lg: 500 14px/1.3;

    /* Brand tonal containers — static fallbacks computed from the Pols
       default seeds (#1a6e7a / #e88c2a / #2e7d32) with the exact math
       Branding::render_css_vars() uses (container = 15% seed on white,
       on-container = 35% seed on black). The per-site inline <style>
       overrides these on every branded page; the fallbacks only matter
       before/without that style block. */
    --pols-primary-container:      #dde9eb;
    --pols-on-primary-container:   #09272b;
    --pols-secondary-container:    #fceedf;
    --pols-on-secondary-container: #51310f;
    --pols-tertiary-container:     #e0ece0;
    --pols-on-tertiary-container:  #102c12;
    --pols-surface-tint:           #1a6e7a;
}