/**
 * @file tokens.css
 * @description Shared Luminous Flat design tokens — the single source of truth
 *              for color, type, spacing, radius, elevation, and motion across
 *              every role/app page in KCAM.
 *
 * Why this file exists (05_DESIGN 1.3 #6):  tokens were copy-pasted per page,
 * causing casing drift and the critical --primary/--secondary swap (1.3 #1).
 * A single shared import fixes both problems: one change here propagates
 * everywhere, and the semantic names are stable across every page.
 *
 * Usage:  <link rel="stylesheet" href="/css/tokens.css"> before any
 *         page-specific <style>.  Page styles extend — they do NOT redefine —
 *         the tokens declared here.
 *
 * DO NOT include layout or component rules here — only `:root` custom
 * properties and the mandatory @media (prefers-reduced-motion) reset.
 *
 * Brand-dynamic values (accent/focus/etc.) can be overridden at runtime by
 * display.js calling `document.documentElement.style.setProperty()`
 * — the cascade means those inline overrides win over these :root defaults,
 * so the P0-T07 brand config mechanism keeps working.
 */

:root {
    /* -----------------------------------------------------------------------
     * Hue palette — immutable, human-readable names (05_DESIGN §2.2)
     * Components MUST NOT reference these directly; use the semantic roles
     * below so that a single brand override (e.g. Christmas) works globally.
     * ----------------------------------------------------------------------- */
    --hue-rose:   #FF3366;   /* the kiss / heart signature */
    --hue-cyan:   #00F2FF;   /* electric focus             */
    --hue-gold:   #FFCC00;   /* celebratory highlight      */
    --hue-mint:   #00E68A;   /* success                    */
    --hue-violet: #9B5DE5;   /* depth accent / bridge      */

    /* -----------------------------------------------------------------------
     * Surfaces — deep cosmic darkness (05_DESIGN §2.2)
     * App background = radial-gradient(circle at center, base 0%, deep 100%)
     * ----------------------------------------------------------------------- */
    --surface-void: #050510;                   /* deepest; hard-shadow color  */
    --surface-deep: #0A092D;                   /* radial bg outer / dark base */
    --surface-base: #1B0639;                   /* radial bg center            */
    --surface-card: rgba(255, 255, 255, 0.06); /* elevated translucent panel  */
    --surface-hair: rgba(255, 255, 255, 0.10); /* 1px hairline border         */

    /* -----------------------------------------------------------------------
     * Semantic roles — what components reference (stable on EVERY page).
     * This fixes 05_DESIGN finding 1.3 #1: --primary was cyan on /display
     * and rose on every other page.  These names never flip.
     * ----------------------------------------------------------------------- */
    --accent:       var(--hue-rose);  /* primary action, brand, the heart      */
    --accent-hover: color-mix(in srgb, var(--hue-rose) 80%, #ffffff);
                                      /* lightened brand rose — hover states (P44-T05) */
    --accent-on-light: #D81B54;
    /* Brand rose DARKENED for a light background, and only for one.
     *
     * --accent is correct on every dark surface here (5.2:1 base / 5.4:1 deep /
     * 5.7:1 void) but measures just 3.55:1 on #FFFFFF, so every link on the 22
     * deliberately light-theme pages under public/party/help/ — read and printed
     * under room lights — failed the 4.5:1 body bar. Darkening --accent itself
     * would fix those 22 by degrading every dark surface in the product, which
     * is the wrong trade: this is a second role for a second background, not a
     * correction to the first. Measures 4.99:1 on white.
     *
     * Do NOT use this on a dark surface: it drops to 3.86:1 on --surface-deep,
     * below the body bar. The pairing is the point — --accent for dark,
     * --accent-on-light for light.
     *
     * The light-theme documents (public/party/help/*.html, party/host-card.html)
     * do not link this stylesheet by design, so they carry the value as a synced
     * literal — the posture host-card.html:25 already documents. This
     * declaration is the recorded source those literals must match. */
    --focus:     var(--hue-cyan);    /* focus ring, progress, info, links     */
    --highlight: var(--hue-gold);    /* in-progress / attention               */
    --success:   var(--hue-mint);    /* success states                        */
    --danger:    var(--hue-rose);    /* error/destructive (pair with icon)    */
    --text:        #FFFFFF;
    --text-muted:  rgba(255, 255, 255, 0.65);
    --text-faint:  rgba(255, 255, 255, 0.40); /* raised from 0.35 for contrast */

    /* -----------------------------------------------------------------------
     * State tint surfaces — hue @ 8% opacity (05_DESIGN §2.2 tint convention)
     * ----------------------------------------------------------------------- */
    --tint-focus:   rgba(0, 242, 255, 0.08);
    --tint-danger:  rgba(255, 51, 102, 0.08);
    --tint-success: rgba(0, 230, 138, 0.08);
    --tint-gold:    rgba(255, 204, 0, 0.08);

    /* -----------------------------------------------------------------------
     * Type scale — fluid, rounded, heavy (05_DESIGN §2.3)
     * Labels: display/title/heading use UPPER + letter-spacing; body/caption
     * use sentence case.
     * ----------------------------------------------------------------------- */
    --fs-display: clamp(2.2rem, 6vw, 4rem);       /* 900, UPPER, +2px  */
    --fs-title:   clamp(1.5rem, 5vw, 2.6rem);      /* 900, UPPER, +2px  */
    --fs-heading: clamp(1.1rem, 3vw, 1.5rem);      /* 900, UPPER, +1px  */
    --fs-body:    clamp(0.95rem, 2.5vw, 1.1rem);   /* 700, sentence     */
    --fs-caption: clamp(0.75rem, 2vw, 0.9rem);     /* 700, sentence     */

    /* -----------------------------------------------------------------------
     * Spacing scale — 8-based (05_DESIGN §2.4)
     * ----------------------------------------------------------------------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* -----------------------------------------------------------------------
     * Radius scale — maximal rounding (05_DESIGN §2.4)
     * ----------------------------------------------------------------------- */
    --radius-sm:     12px;
    --radius-md:     20px;
    --radius-lg:     32px;   /* ≈ 3vh */
    --radius-xl:     4vh;
    --radius-pill:   999px;
    --radius-circle: 50%;

    /* -----------------------------------------------------------------------
     * Elevation — flat hard offset, no blur (05_DESIGN §2.5)
     * --glow-onair is ONLY for the live/on-air indicator pulse badge.
     * Using it anywhere else violates the flat mandate.
     * ----------------------------------------------------------------------- */
    --shadow-pop:   6px 6px 0 var(--surface-void);
    --shadow-pop-sm: 4px 4px 0 var(--surface-void);
    --shadow-pop-lg: 12px 12px 0 var(--surface-void);

    /* The ONE sanctioned glow — exclusively for the live/on-air pulse badge. */
    --glow-onair: 0 0 24px rgba(255, 51, 102, 0.45);

    /* -----------------------------------------------------------------------
     * Motion — spring / smooth easing + durations (05_DESIGN §2.6)
     * ----------------------------------------------------------------------- */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot/settle */
    --ease-smooth:   cubic-bezier(0.25, 1, 0.5, 1);       /* calm fades       */
    --dur-fast:      .2s;
    --dur-base:      .3s;
    --dur-slow:      .4s;
    --dur-cinematic: .8s;

    /* -----------------------------------------------------------------------
     * Legacy aliases — keeps markup that predates this file working without
     * a rewrite.  New code must use the canonical names above.
     * ----------------------------------------------------------------------- */
    --bg-center: var(--surface-base);
    --bg-outer:  var(--surface-deep);
    --obsidian:  var(--surface-void);
    --white:     #FFFFFF;
    --card-bg:   var(--surface-card);
    --border:    var(--surface-hair);
}

/* -------------------------------------------------------------------------
 * Reduced-motion — required; currently missing on most pages (1.3 #3).
 * Spring/overshoot/pulse are enhancements; the UI must be fully usable
 * without them.  Opacity transitions are preserved (they carry meaning).
 * This block is idempotent: pages that already declared it get the same
 * rule from this shared stylesheet.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}