/* ============================================================
   Miranativa design tokens — ЕДИНСТВЕННЫЙ источник палитры и шкал.
   Подключается ПЕРВЫМ из base.html и mini.html; style.css/mini.css
   держат только компонентные правила и свои осознанные оверрайды.
   Тройка блоков: :root (тёмная «Сумерки») → [data-theme="light"]
   («Полдень») → @media prefers-light для клиентов без JS.
   ============================================================ */

:root {
    /* Dark theme = "Сумерки": deep indigo cosmos + gold accent (Miranativa night
       — same palette the meditation bridge shares; see design/ unified system). */
    --bg: #15101e;
    --fg: #ededf2;
    /* Alias: several rules historically referenced var(--text), which was never
       defined and silently fell back to inherited colors. Keep both names live. */
    --text: var(--fg);
    --muted: #9aa7b5;
    /* One warm accent per the unified system: gold in the dark "twilight". */
    --accent: #f0a843;
    /* Бары графиков: темнее акцента — валидировано на контраст с фоном. */
    --chart-bar: #bf7d15;
    /* Text ON the warm accent: gold reads with a deep warm-brown ink, not white. */
    --on-accent: #2a1c08;
    --border: #322b46;
    --bubble-user: #221a36;
    --bubble-agent: #1b1530;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --radius: 12px;
    /* Astral atelier: thin platinum linework + warm amber accents (Yin Metal + Fire). */
    --platinum: #c9ccd6;
    --platinum-dim: rgba(201,204,214,0.28);
    --platinum-line: rgba(201,204,214,0.16);
    --amber: #f0a843;
    --amber-soft: rgba(240,168,67,0.18);
    --amber-strong: #f7b955;
    --cta-ink: #2a1c08;
    /* Playfair Display — кириллический дублёр: Fraunces без кириллицы, RU-заголовки
       раньше падали в системный serif. */
    --display-font: "Fraunces", "Playfair Display", "Charter", Georgia, serif;
    /* Body/UI font — Manrope, the calm grotesque that pairs with Fraunces across
       both Miranativa and the meditation app (shared "bone" of the system). */
    --ui-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
    /* Shared ink loops across all three lights — typography reads as one hand. */
    --ink: #1a1a1a;
    --warm-white: #fff7f0;
    /* Twilight amethyst fog — decorative constellation tint (not an accent). */
    --amethyst: #8e7bc0;
    --hero-violet: #a855f7;
    --hero-violet-2: #c084fc;
    --hero-violet-3: #7c3aed;
    /* Translucent card fill — closer to the cosmic bg than the solid grey. */
    --card-glass: rgba(28, 22, 46, 0.55);
    /* Solid-surface tokens shared with the mini app (mini.css defines the same
       names). Promo/feedback blocks reference them — without these definitions
       the dark fallbacks fired in the light theme: dark ink on dark fields. */
    --surface: #221a36;
    --surface-2: #2a2142;
    --card: #1b1420;
    --line: rgba(255, 255, 255, 0.12);
    --accent-deep: #c97a2a;
    --amber-line: rgba(240, 168, 67, 0.42);
    /* Floating panels (popups, chat) — layered, theme-switched elevation. */
    --shadow-float: 0 32px 80px -20px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.25);

    /* === Aureate Canon: Fibonacci-on-8 series (design/AUREATE-CANON.md) ===
       Every spacing/radius/font-size below derives from this ladder, so the
       composition breathes in one ratio (each step ≈ × φ ≈ 1.618). */
    --phi-1:   8px;   /* hair gaps */
    --phi-2:  13px;   /* small padding, small font, pill radius */
    --phi-3:  21px;   /* card padding, body font */
    --phi-4:  34px;   /* section spacing, h2 */
    --phi-5:  55px;   /* hero spacing, h1 */
    --phi-6:  89px;
    --phi-7: 144px;
    --phi-8: 233px;
    --phi-9: 377px;
    --phi-10: 987px;

    /* Type scale on the same ladder (canon §7). 16/26 are sanctioned optical
       half-steps; everything in the app should resolve to one of these. */
    --fs-caption: 13px;
    --fs-body:    16px;
    --fs-lead:    21px;
    --fs-h2:      26px;
    --fs-h1:      34px;

    /* Semantic states — the cabinet used to hardcode #2e8b57/#c33/#26A5E4 etc. */
    --ok:          #22a06b;
    --ok-soft:     rgba(34,160,107,0.14);
    --danger:      #e0584f;
    --danger-soft: rgba(224,88,79,0.12);
    --info:        #5b8def;
    --info-soft:   rgba(91,141,239,0.14);
}

[data-theme="light"] {
    --bg: #f4ecde;
    --fg: #1a1a1a;
    --muted: #6b5f55;
    --accent: #b8431a;
    --chart-bar: #b8431a;
    --on-accent: #fff7f0;
    --border: #e4d8c4;
    --ok:          #1d7d54;
    --ok-soft:     rgba(29,125,84,0.10);
    --danger:      #c0392b;
    --danger-soft: rgba(192,57,43,0.08);
    --info:        #3c6fd6;
    --info-soft:   rgba(60,111,214,0.10);
    --bubble-user: #efe6d5;
    --bubble-agent: #fffaf1;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    /* Light theme carries Mars/Aries heat: warm metal + ember/red accents. */
    --platinum: #8a6f63;
    --platinum-dim: rgba(170,70,40,0.30);
    --platinum-line: rgba(170,70,40,0.18);
    --amber: #b8431a;
    --amber-soft: rgba(212,84,30,0.14);
    --amber-strong: #e2611f;
    --cta-ink: #fff7f0;
    --mars: #c0392b;
    --mars-soft: rgba(192,57,43,0.12);
    --hero-violet: #b3431f;
    --hero-violet-2: #d4541e;
    --hero-violet-3: #9e2f17;
    --card-glass: rgba(255, 252, 248, 0.62);
    --surface: #fffaf1;
    --surface-2: #f6eee0;
    --card: #fffaf1;
    --line: rgba(120, 90, 50, 0.18);
    --accent-deep: #9e2f17;
    --amber-line: rgba(184, 67, 26, 0.34);
    --shadow-float: 0 24px 64px -24px rgba(60,40,20,.28), 0 6px 20px rgba(60,40,20,.12);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #f4ecde;
        --fg: #1a1a1a;
        --muted: #6b5f55;
        --accent: #b8431a;
        --chart-bar: #b8431a;
        --on-accent: #fff7f0;
        --border: #e4d8c4;
        --ok:          #1d7d54;
        --ok-soft:     rgba(29,125,84,0.10);
        --danger:      #c0392b;
        --danger-soft: rgba(192,57,43,0.08);
        --info:        #3c6fd6;
        --info-soft:   rgba(60,111,214,0.10);
        --bubble-user: #efe6d5;
        --bubble-agent: #fffaf1;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
        --platinum: #8a6f63;
        --platinum-dim: rgba(170,70,40,0.30);
        --platinum-line: rgba(170,70,40,0.18);
        --amber: #b8431a;
        --amber-soft: rgba(212,84,30,0.14);
        --amber-strong: #e2611f;
        --cta-ink: #fff7f0;
        --mars: #c0392b;
        --mars-soft: rgba(192,57,43,0.12);
        --hero-violet: #b3431f;
        --hero-violet-2: #d4541e;
        --hero-violet-3: #9e2f17;
        --card-glass: rgba(255, 252, 248, 0.62);
        --surface: #fffaf1;
        --surface-2: #f6eee0;
        --card: #fffaf1;
        --line: rgba(120, 90, 50, 0.18);
        --accent-deep: #9e2f17;
        --amber-line: rgba(184, 67, 26, 0.34);
        --shadow-float: 0 24px 64px -24px rgba(60,40,20,.28), 0 6px 20px rgba(60,40,20,.12);
    }
}