/* ==========================================================================
   THIRUVASAGAM 369 — COSMIC SHAIVA × MODERN SCIENCE
   Design tokens (§4, §18)

   The palette is built around one idea: the page is night sky, the reading
   surface is lamplight. Everything sacred is warm (copper, restrained
   saffron); everything empirical is cool (a single controlled cyan). Those two
   families never blend into each other, which is the visual half of the §12
   promise that spiritual reading and scientific evidence stay distinguishable.

   Saffron is used at exactly three places — the brand mark, the takeaway card
   and the active nav indicator — so it keeps its weight.
   ========================================================================== */

:root {
    /* ---- Core surfaces: cosmic charcoal/navy -------------------------- */
    --void: #070A12;
    --bg: #0B0F1A;
    --bg-raised: #111726;
    --bg-card: #141B2C;
    --bg-inset: #0E1421;
    --hairline: rgba(233, 221, 201, 0.09);
    --hairline-strong: rgba(233, 221, 201, 0.16);

    /* ---- Text: warm off-white, never pure white ----------------------- */
    --ink: #F2EBDF;
    --ink-soft: #C9C0B2;
    --ink-muted: #8C8578;
    --ink-faint: #5E594F;

    /* ---- Copper / gold: the sacred register --------------------------- */
    --copper: #C08A4E;
    --copper-bright: #E0B072;
    --copper-deep: #8A5F32;
    --copper-wash: rgba(192, 138, 78, 0.10);
    --copper-edge: rgba(192, 138, 78, 0.32);

    /* ---- Saffron: reserved, high-meaning ------------------------------ */
    --saffron: #E89A4C;
    --saffron-bright: #F5B36B;
    --saffron-wash: rgba(232, 154, 76, 0.12);

    /* ---- Cyan: the scientific register -------------------------------- */
    --cyan: #52C7D4;
    --cyan-bright: #7FE0EA;
    --cyan-wash: rgba(82, 199, 212, 0.10);
    --cyan-edge: rgba(82, 199, 212, 0.30);

    /* ---- Mind: a quiet violet, distinct from both registers ----------- */
    --violet: #9E8AD6;
    --violet-bright: #BCA9EE;
    --violet-wash: rgba(158, 138, 214, 0.11);
    --violet-edge: rgba(158, 138, 214, 0.28);

    /* ---- Life: grounded sand ------------------------------------------ */
    --sand: #D3A86C;
    --sand-wash: rgba(211, 168, 108, 0.10);
    --sand-edge: rgba(211, 168, 108, 0.26);

    /* ---- Reading surface: lamplight on paper -------------------------- */
    --paper: #F7F1E6;
    --paper-ink: #241F18;
    --paper-ink-soft: #4C463C;

    /* ---- Status ------------------------------------------------------- */
    --ok: #6FBF8B;
    --warn: #E0A94F;
    --danger: #E0725F;
    --danger-wash: rgba(224, 114, 95, 0.12);

    /* ---- Typography ---------------------------------------------------
       Tamil first. Noto Sans Tamil for explanation prose (even colour, wide
       apertures, holds up at long lengths); Anek Tamil for the verse, which
       is more literary but still highly readable — §18 forbids decorative
       faces for long copy, not for five lines of poetry. */
    --font-tamil: 'Noto Sans Tamil', 'Nirmala UI', 'Latha', 'Tamil Sangam MN', 'Noto Sans', sans-serif;
    --font-verse: 'Anek Tamil', 'Noto Sans Tamil', 'Nirmala UI', 'Tamil Sangam MN', serif;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

    /* Reader-controlled, written by the SPA and pre-applied in the shell. */
    --reader-font-scale: 1;
    --reader-line-height: 1.8;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* ---- Space, radius, depth ------------------------------------------ */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --glow-copper: 0 0 40px -12px rgba(192, 138, 78, 0.45);

    --glass: rgba(255, 255, 255, 0.028);
    --glass-edge: rgba(255, 255, 255, 0.07);
    --blur: 16px;

    /* ---- Motion: present but never showy (§4, §36) --------------------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fast: 140ms;
    --base: 240ms;
    --slow: 420ms;

    /* ---- Layout -------------------------------------------------------- */
    --reading-width: 68ch;
    --shell-max: 1400px;
    --nav-h: 64px;
    --bottom-nav-h: 62px;
}

/* Reading width is a reader preference (§18). */
:root[data-reading-width='narrow'] { --reading-width: 56ch; }
:root[data-reading-width='comfortable'] { --reading-width: 68ch; }
:root[data-reading-width='wide'] { --reading-width: 80ch; }

/* ==========================================================================
   Themes
   ========================================================================== */

/* Dawn — a light theme that keeps the same warm/cool split. */
:root[data-theme='dawn'] {
    --void: #EDE5D8;
    --bg: #F6F1E7;
    --bg-raised: #FFFFFF;
    --bg-card: #FFFDF9;
    --bg-inset: #EFE8DB;
    --hairline: rgba(36, 31, 24, 0.10);
    --hairline-strong: rgba(36, 31, 24, 0.18);

    --ink: #241F18;
    --ink-soft: #4C463C;
    --ink-muted: #6E6658;
    --ink-faint: #9A9384;

    --copper: #96632F;
    --copper-bright: #B07C42;
    --copper-wash: rgba(150, 99, 47, 0.08);
    --copper-edge: rgba(150, 99, 47, 0.26);

    --saffron: #C2701F;
    --saffron-bright: #D98A3A;
    --saffron-wash: rgba(194, 112, 31, 0.10);

    --cyan: #14717C;
    --cyan-bright: #1D8C99;
    --cyan-wash: rgba(20, 113, 124, 0.08);
    --cyan-edge: rgba(20, 113, 124, 0.24);

    --violet: #6A55A8;
    --violet-bright: #7F68C2;
    --violet-wash: rgba(106, 85, 168, 0.08);
    --violet-edge: rgba(106, 85, 168, 0.22);

    --sand: #96703A;
    --sand-wash: rgba(150, 112, 58, 0.08);
    --sand-edge: rgba(150, 112, 58, 0.22);

    --paper: #FFFDF8;
    --paper-ink: #241F18;
    --paper-ink-soft: #4C463C;

    --glass: rgba(36, 31, 24, 0.022);
    --glass-edge: rgba(36, 31, 24, 0.06);

    --shadow-md: 0 6px 24px -10px rgba(36, 31, 24, 0.22);
    --shadow-lg: 0 24px 60px -24px rgba(36, 31, 24, 0.28);
    --glow-copper: 0 0 40px -14px rgba(150, 99, 47, 0.30);
}

/* Sepia — for long reading sessions. */
:root[data-theme='sepia'] {
    --void: #E5D9C3;
    --bg: #F0E6D2;
    --bg-raised: #F8F1E3;
    --bg-card: #FBF6EA;
    --bg-inset: #E9DEC8;
    --hairline: rgba(58, 44, 26, 0.12);
    --hairline-strong: rgba(58, 44, 26, 0.20);

    --ink: #3A2C1A;
    --ink-soft: #5A4A33;
    --ink-muted: #7C6B51;
    --ink-faint: #A2917A;

    --paper: #FBF6EA;
    --paper-ink: #3A2C1A;
    --paper-ink-soft: #5A4A33;

    --copper: #8A5B27;
    --copper-bright: #A6713A;
    --cyan: #1A6B6E;
    --violet: #5F4C93;

    --glass: rgba(58, 44, 26, 0.02);
    --glass-edge: rgba(58, 44, 26, 0.06);
}

/* §36 — honour the system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --fast: 0ms;
        --base: 0ms;
        --slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* §36 — high contrast. */
@media (prefers-contrast: more) {
    :root {
        --ink-soft: #E4DCCC;
        --ink-muted: #B6AE9E;
        --hairline: rgba(233, 221, 201, 0.22);
        --hairline-strong: rgba(233, 221, 201, 0.34);
    }
}