/* ============================================================================
   OUQIS, canonical design tokens (SINGLE SOURCE OF TRUTH)
   Imported by the marketing site (styles.css) AND the course app
   (course-source/src/index.css). Edit values HERE; the course's Tailwind
   @theme mirrors the palette literals for static utility generation and is
   kept in sync with this file.

   Palette (Phase 4): the society's violet / blue / cyan hues are preserved,
   but the VALUES were moved off the raw Tailwind grid and rebalanced in OKLCH
   so the gradient reads even. Previously cyan (#22d3ee, contrast 11.47 on the
   void) was ~3× brighter than violet (#7c3aed, 3.64), lopsided. Now the three
   stops sit close in luminance (violet 4.69 / blue 5.46 / cyan 8.77), violet is
   nudged toward magenta and lightened, cyan is greener + softer.
   ========================================================================== */
:root {
    /* The void */
    --void: #020205;
    --void-up: #08080f;
    --void-card: #0c0c14;

    /* Quantum spectrum, off-Tailwind, luminance-rebalanced (OKLCH-derived) */
    --q-violet: #994ef4;   /* oklch(0.60 0.235 300), was #7c3aed */
    --q-blue:   #6178f7;   /* oklch(0.62 0.19  272), was #6366f1 */
    --q-cyan:   #28bac1;   /* oklch(0.72 0.115 200), was #22d3ee, pulled back */
    --q-purple: #c452dd;   /* oklch(0.64 0.22  320), was #a855f7 */
    --q-pink:   #e84fa4;   /* oklch(0.66 0.205 350), was #ec4899 */
    --q-emerald:#2cd69e;   /* oklch(0.78 0.155 165), was #34d399 */

    /* The signature gradient. Interpolated in OKLCH so the midpoint no longer
       dips muddy the way sRGB interpolation did. Used ONCE, large. */
    --q-gradient:      linear-gradient(135deg in oklch, var(--q-violet), var(--q-blue), var(--q-cyan));
    --q-gradient-warm: linear-gradient(135deg in oklch, var(--q-violet), var(--q-pink), #f2a54a);
    --q-gradient-cool: linear-gradient(135deg in oklch, var(--q-blue), var(--q-cyan), var(--q-emerald));

    /* Text, warmed off the cold blue-grey; all clear WCAG AA on the void */
    --text-primary:   #f2f0ec;   /* contrast 18.2, warm near-white */
    --text-secondary: #91919d;   /* contrast 6.65, AA */
    --text-dim:       #7f7f8c;   /* contrast 5.25, AA (was #5a5a72, failed) */

    /* Borders & surfaces */
    --border:      rgba(255, 255, 255, 0.14);   /* decorative dividers only; 0.08 was 1.15:1 */
    /* SC 1.4.11 governs the boundaries of user-interface COMPONENTS, inputs,
       buttons, controls, not decorative rules. This token is the one that has
       to clear 3:1, measured: 3.15:1 on --void, 3.31:1 on --void-card.
       Note the audit's suggested 0.24 does NOT reach 3:1; it computes to
       1.97:1 on --void. 0.36 is the value that actually gets there. */
    --border-ui:   rgba(255, 255, 255, 0.36);
    --border-glow: rgba(97, 120, 247, 0.2);
    --surface-glow: rgba(153, 78, 244, 0.03);

    /* Type scale, modular, ratio 1.25 (major third). Display sizes stay fluid
       via clamp() but derive from the same rhythm. */
    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.25rem;    /* 20px */
    --fs-lg:   1.563rem;   /* 25px */
    --fs-xl:   1.953rem;   /* 31px */
    --fs-2xl:  2.441rem;   /* 39px */
    --fs-3xl:  3.052rem;   /* 49px */
    --fs-h1: clamp(2.8rem, 6vw, 4.9rem);
    --fs-h2: clamp(1.8rem, 4vw, 2.8rem);
    --fs-h3: clamp(1.1rem, 2vw, 1.4rem);

    /* Tracking, tighter as type gets larger */
    --track-display: -0.04em;
    --track-heading: -0.03em;
    --track-eyebrow: 0.28em;

    /* System */
    --font: 'Space Grotesk', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 100px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Film grain, a faint tiled noise data-URI (feTurbulence). Kept as a token
       so both surfaces overlay the same texture. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}