/* public/css/tokens.css
 *
 * Single source of truth for color/elevation tokens. Light mode under
 * `:root` (and `[data-bs-theme="light"]`), dark mode under
 * `[data-bs-theme="dark"]`. Loaded as the FIRST stylesheet on every
 * HTML page so file-level stylesheets (astro.css, view-profile.css,
 * synastry.css, learn.css, landing.css) can `var(--token)` against the
 * canonical palette.
 *
 * Token names and values come from docs/audits/dark-mode.md §3.2.
 * The dark ruleset landed in Phase 3 of the dark-mode epic (#334);
 * toggle UI and chart-side color wiring ship in later phases.
 */

:root,
[data-bs-theme="light"] {
    /* Type scale (rem — Hindi html.lang-hi { font-size: 1.2em } scales automatically) */
    --fs-xs:   0.65rem;   /* house numbers, micro labels */
    --fs-sm:   0.75rem;   /* badges, captions, metadata */
    --fs-base: 0.875rem;  /* body default */
    --fs-md:   1rem;      /* paragraphs, card text */
    --fs-lg:   1.125rem;  /* section subheadings */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   600;

    /* Surfaces (elevation 0–3) */
    --surface-0: #f8fafc;   /* canvas */
    --surface-1: #ffffff;   /* card */
    --surface-2: #ffffff;   /* raised card */
    --surface-3: #ffffff;   /* modal/popover */

    /* Ink (text contrast scale) */
    --ink-1: #0f172a;       /* primary text */
    --ink-2: #334155;       /* body text */
    --ink-3: #64748b;       /* muted */
    --ink-4: #94a3b8;       /* disabled / sign numbers */

    /* Brand */
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-soft: #eef2ff;

    /* Status */
    --good: #16a34a;
    --good-soft: #dcfce7;
    --warn: #d97706;
    --warn-soft: #fef3c7;
    --bad: #dc2626;
    --bad-soft: #fee2e2;

    /* Borders & shadows */
    --border-soft: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.16);
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --shadow-modal: 0 20px 60px -20px rgba(0, 0, 0, 0.2);

    /* Chart SVG */
    --chart-bg: #ffffff;
    --chart-stroke: #475569;
    --chart-stroke-active: #2563eb;
    --chart-sign-num: #94a3b8;
    --chart-planet-benefic: #15803d;
    --chart-planet-malefic: #b91c1c;
    --chart-planet-neutral: #334155;

    /* Ashtakavarga heatmap tints */
    --sav-low: #fee2e2;    /* red tint */
    --sav-med: #fef9c3;    /* yellow tint */
    --sav-high: #dcfce7;   /* green tint */

    /* Synastry guna pastels (hue identity preserved across themes) */
    --c-varna: #FFB3BA;
    --c-vashya: #FFDFBA;
    --c-tara: #FFFFBA;
    --c-yoni: #BAFFC9;
    --c-maitri: #BAE1FF;
    --c-gana: #E6B3FF;
    --c-bhakoot: #FFB3E6;
    --c-nadi: #A2E1DB;

    /* Synastry donut ring background */
    --syn-ring-bg: #f1f5f9;

    /* Yoga strength gradient */
    --yoga-grad-start: #FFD700;
    --yoga-grad-end: #8A2BE2;

    /* Toast */
    --toast-bg: #1e293b;
    --toast-ink: #ffffff;
}

[data-bs-theme="dark"] {
    /* Surfaces — cosmic slate, lifted from landing.css. Elevation is
       expressed as a gentle lightness ladder so raised cards and
       modals still read as "lifted" on a dark canvas. */
    --surface-0: #0b1220;   /* canvas, slightly deeper than slate-900 */
    --surface-1: #111a2e;   /* card */
    --surface-2: #182238;   /* raised card */
    --surface-3: #1e293b;   /* modal/popover */

    /* Ink — inverted contrast scale */
    --ink-1: #f8fafc;       /* primary text */
    --ink-2: #cbd5e1;       /* body text */
    --ink-3: #94a3b8;       /* muted */
    --ink-4: #64748b;       /* disabled / sign numbers */

    /* Brand — desaturated indigo-400 so it does not vibrate on dark */
    --primary: #818cf8;         /* indigo-400 */
    --primary-hover: #a5b4fc;   /* indigo-300 */
    --primary-soft: rgba(129, 140, 248, 0.12);

    /* Status — brighter, less saturated to maintain AA on dark */
    --good: #4ade80;
    --good-soft: rgba(74, 222, 128, 0.12);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.12);
    --bad: #f87171;
    --bad-soft: rgba(248, 113, 113, 0.12);

    /* Borders & shadows — translucent white so hardcoded slate borders
       do not disappear against the dark canvas */
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 20px 60px -20px rgba(0, 0, 0, 0.7);

    /* Chart SVG — JS-rendered charts still read hardcoded hexes in
       Phase 3 (fixed in Phase 4), so these tokens are ready for when
       chart-viewer / synastry-core / yoga-list start consuming vars. */
    --chart-bg: #111a2e;
    --chart-stroke: #64748b;
    --chart-stroke-active: #818cf8;
    --chart-sign-num: #64748b;
    --chart-planet-benefic: #4ade80;
    --chart-planet-malefic: #f87171;
    --chart-planet-neutral: #cbd5e1;

    /* Ashtakavarga heatmap tints — higher opacity than status-soft so
       score bands remain clearly distinguishable on dark canvas */
    --sav-low: rgba(248, 113, 113, 0.18);
    --sav-med: rgba(251, 191, 36, 0.18);
    --sav-high: rgba(74, 222, 128, 0.18);

    /* Synastry guna pastels — muted on dark, hue identity preserved
       (varna still reads as pink, yoni still green, etc.). ~30%
       lightness drop from the light palette. */
    --c-varna: #7a3b44;
    --c-vashya: #7a5a3b;
    --c-tara: #7a7a3b;
    --c-yoni: #3b7a48;
    --c-maitri: #3b5c7a;
    --c-gana: #5c3b7a;
    --c-bhakoot: #7a3b5c;
    --c-nadi: #3b6a66;

    /* Synastry donut ring background */
    --syn-ring-bg: #1e293b;

    /* Yoga strength gradient — dimmed for dark canvas */
    --yoga-grad-start: #b8960a;
    --yoga-grad-end: #6a1b9a;

    /* Toast — lighter than canvas to maintain elevation */
    --toast-bg: #1e293b;
    --toast-ink: #f8fafc;

    /* Bootstrap bridge — align BS background utilities (bg-body,
       bg-body-secondary, bg-body-tertiary) with the cosmic surface
       palette so they use cosmic blues instead of Bootstrap's default
       neutral grays. Without this, bg-body-secondary renders as
       #343a40 (gray-700) which clashes with the cosmic card surfaces. */
    --bs-body-bg: #0b1220;              /* surface-0  */
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-secondary-bg: #1e293b;         /* surface-3  */
    --bs-secondary-bg-rgb: 30, 41, 59;
    --bs-tertiary-bg: #111a2e;          /* surface-1  */
    --bs-tertiary-bg-rgb: 17, 26, 46;
}

/* ── Devanagari legibility on dark backgrounds ───────────────────────
   Noto Sans Devanagari at weight 400 renders thin on dark surfaces.
   Bump body text to 500 in dark mode for Hindi; headings already use
   600 via html.lang-hi rules in astro.css / view-profile.css / learn.css. */
html[data-bs-theme="dark"].lang-hi {
    font-weight: 500;
}

/* Toast component — used by ops.js showOpsToast() */
.astro-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    background: var(--toast-bg); color: var(--toast-ink);
    padding: 12px 20px; border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-size: 14px;
    max-width: 360px; animation: fadeInUp 0.2s ease;
}