/*
 * warm-system.css — My Family Agent "Warm System" Design Tokens
 *
 * Источник: утверждённый прототип Claude Design (AIMO Redesign, :root === REIMAGINED_SPEC §2).
 * ЕДИНЫЙ источник дизайн-токенов. Подключается <link> в index.html сразу ПОСЛЕ styles.css,
 * поэтому детерминированно переопределяет легаси :root (indigo) для всего приложения.
 *
 * Структура навигации проекта (5 вкладок) НЕ трогается.
 * Меняются только: цвета, типографика, радиусы, тени, glass-система.
 */

/* ── Google Fonts (Inter 300–900) нужен для типографики ──
   Уже подключён в index.html — не дублируем. */

/* ══════════════════════════════════════════════════════════════════
   ROOT — WARM DEFAULT (amber+rose, тёплый тёмный фон)
   ══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand colors — WARM ── */
    --mfa-amber:         #F59E0B;
    --mfa-amber-dark:    #D97706;
    --mfa-amber-light:   #FBBF24;
    --mfa-rose:          #FB7185;
    --mfa-rose-light:    #FDA4AF;
    --mfa-coral:         #FB923C;
    --mfa-terracotta:    #D97757;

    /* ── Aliases (используются в существующем коде) ── */
    --primary-color:     var(--mfa-amber);
    --primary-dark:      var(--mfa-amber-dark);
    --primary-rgb:       245, 158, 11;
    --secondary-color:   var(--mfa-rose);
    --secondary-rgb:     251, 113, 133;
    --accent-gradient:   linear-gradient(135deg, #F59E0B 0%, #FB7185 100%);
    --agent-gradient:    var(--accent-gradient);
    --agent-text-gradient: linear-gradient(135deg, #FBBF24 0%, #FDA4AF 100%);

    /* ── Surfaces — WARM DARK ── */
    --bg:                #1A0F0A;
    --bg-deep:           #0F0805;
    --surface-1:         rgba(28, 16, 8, 0.78);
    --surface-2:         rgba(28, 16, 8, 0.45);
    --surface-3:         rgba(40, 24, 14, 0.65);
    --message-user-bg:   #2A1A12;
    --message-ai-bg:     #1F140D;

    /* ── Text — warm whites ── */
    --fg-1:              #FFF5E8;
    --fg-2:              #E0C9A8;
    --fg-3:              #B89A78;
    --fg-4:              #8C7560;
    --fg-on-grad:        #ffffff;

    /* Алиасы для совместимости с существующим кодом */
    --text-primary:      var(--fg-1);
    --text-secondary:    var(--fg-2);
    --text-tertiary:     var(--fg-3);

    /* ── Borders — amber-tinted ── */
    --border-1:          rgba(251, 146, 60, 0.08);
    --border-2:          rgba(251, 146, 60, 0.18);
    --border-3:          rgba(251, 146, 60, 0.28);
    --hover-bg:          rgba(251, 146, 60, 0.06);

    /* ── Semantic ── */
    --success:           #22c55e;
    --success-soft:      #34d399;
    --warning:           #f59e0b;
    --warning-soft:      #fbbf24;
    --error:             #ef4444;
    --error-soft:        #fca5a5;
    --info:              #06b6d4;

    /* ── Status badges ── */
    --badge-home-fg:     #34d399;
    --badge-home-bg:     rgba(16, 185, 129, 0.15);
    --badge-work-fg:     #fbbf24;
    --badge-work-bg:     rgba(245, 158, 11, 0.15);
    --badge-school-fg:   #c4b5fd;
    --badge-school-bg:   rgba(168, 85, 247, 0.15);

    /* ── Voice/agent accents ── */
    --voice-agent:       #F59E0B;
    --voice-action:      #FB7185;

    /* ── Radii ── */
    --radius-xs:         6px;
    --radius-sm:         8px;
    --radius-md:         12px;
    --radius-lg:         16px;
    --radius-xl:         24px;
    --radius-2xl:        28px;
    --radius-pill:       100px;

    /* Алиасы существующего кода */
    --border-radius:     var(--radius-md);
    --border-radius-sm:  var(--radius-sm);
    --border-radius-lg:  var(--radius-lg);

    /* ── Spacing scale (4px base) ── */
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;

    /* ── Shadows ── */
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-modal: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 220, 180, 0.06) inset;
    --shadow-glow:  0 8px 32px rgba(245, 158, 11, 0.40);
    --glow:         rgba(245, 158, 11, 0.32);   /* brand glow (orb, logo, mic, кнопки) */
    /* Сцена-оверлей: тёплый коричневый градиент сверху→вниз (фото вверху → solid --bg внизу).
       ЕДИНЫЙ для всех разделов (body::before + home-today/cabinet/family). */
    --scene-overlay: linear-gradient(180deg,
        rgba(26, 15, 10, 0.15) 0%,
        rgba(22, 13, 8, 0.45) 35%,
        rgba(20, 11, 6, 0.80) 62%,
        var(--bg) 85%);
    /* Тёмный dim-слой поверх фото (как .rm-view::before в «Поручениях») */
    --scene-dim: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));

    /* ── Glass system ── */
    --glass-blur-chip:   blur(20px) saturate(180%);
    --glass-blur-panel:  blur(40px) saturate(180%);
    --glass-blur-modal:  blur(60px) saturate(210%);

    /* Chip */
    --glass-chip-bg:         rgba(251, 146, 60, 0.10);
    --glass-chip-bg-hover:   rgba(251, 146, 60, 0.16);
    --glass-chip-border:     rgba(251, 146, 60, 0.18);
    --glass-chip-border-hover: rgba(251, 146, 60, 0.28);
    --glass-chip-radius:     var(--radius-pill);
    --glass-chip-blur:       var(--glass-blur-chip);
    --glass-chip-shadow-hover: 0 4px 16px rgba(245, 158, 11, 0.20);

    /* Panel */
    --glass-panel-bg:        rgba(28, 16, 8, 0.45);
    --glass-panel-bg-hover:  rgba(40, 24, 14, 0.60);
    --glass-panel-border:    rgba(251, 146, 60, 0.18);
    --glass-panel-blur:      var(--glass-blur-panel);
    --glass-panel-radius:    var(--radius-xl);
    --glass-panel-shadow:    var(--shadow-card);
    --glass-panel-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.45);

    /* Modal */
    --glass-modal-bg:        rgba(28, 16, 8, 0.78);
    --glass-modal-blur:      var(--glass-blur-modal);
    --glass-modal-radius:    var(--radius-2xl);
    --glass-modal-shadow:    var(--shadow-modal);

    /* ── Motion ── */
    --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:   all 0.3s var(--ease-out);
    --transition-fast: all 0.2s var(--ease-out);

    /* ── Typography ── */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'Fira Code', 'Monaco', 'Consolas', monospace;
    --font-icons: 'Material Symbols Outlined';

    /* ── Type scale ── */
    --fs-hero:      clamp(42px, 8vw, 80px); --lh-hero: 1.05; --fw-hero: 900;
    --fs-display-1: clamp(28px, 4vw, 48px); --lh-display-1: 1.15; --fw-display-1: 800;
    --fs-h1:        32px; --lh-h1: 1.2;  --fw-h1: 700;
    --fs-h2:        22px; --lh-h2: 1.3;  --fw-h2: 700;
    --fs-h3:        18px; --lh-h3: 1.4;  --fw-h3: 700;
    --fs-body:      15px; --lh-body: 1.7; --fw-body: 400;
    --fs-body-sm:   14px; --lh-body-sm: 1.6;
    --fs-caption:   13px; --lh-caption: 1.5;
    --fs-micro:     12px; --lh-micro: 1.5;
    --fs-eyebrow:   12px; --fw-eyebrow: 700; --ls-eyebrow: 0.15em;
    --fs-code:      13px; --lh-code: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
   COOL THEME — opt-in override (original indigo+purple)
   Применяется через [data-theme="cool"] на <html>
   ══════════════════════════════════════════════════════════════════ */
[data-theme="cool"] {
    --mfa-amber:        #6366f1;
    --mfa-amber-dark:   #4f46e5;
    --mfa-amber-light:  #a5b4fc;
    --mfa-rose:         #a855f7;
    --mfa-rose-light:   #c4b5fd;
    --mfa-coral:        #818CF8;
    --mfa-terracotta:   #6366f1;

    --primary-color:    #6366f1;
    --primary-dark:     #4f46e5;
    --primary-rgb:      99, 102, 241;
    --secondary-color:  #a855f7;
    --secondary-rgb:    168, 85, 247;
    --accent-gradient:  linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --agent-gradient:   var(--accent-gradient);
    --agent-text-gradient: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);

    --bg:               #0a0a0f;
    --bg-deep:          #05050f;
    --surface-1:        rgba(14, 14, 22, 0.92);
    --surface-2:        rgba(255, 255, 255, 0.06);
    --surface-3:        rgba(255, 255, 255, 0.10);
    --message-user-bg:  #1e1e2e;
    --message-ai-bg:    #13131f;

    --fg-1:             #e2e8f0;
    --fg-2:             #94a3b8;
    --fg-3:             #64748b;
    --fg-4:             #475569;
    --text-primary:     var(--fg-1);
    --text-secondary:   var(--fg-2);
    --text-tertiary:    var(--fg-3);

    --border-1:         rgba(255, 255, 255, 0.06);
    --border-2:         rgba(255, 255, 255, 0.10);
    --border-3:         rgba(255, 255, 255, 0.15);
    --hover-bg:         rgba(255, 255, 255, 0.05);

    --voice-agent:      #6366f1;
    --voice-action:     #a855f7;

    --shadow-glow:      0 8px 32px rgba(99, 102, 241, 0.40);
    --glow:             rgba(99, 102, 241, 0.32);

    --glass-chip-bg:         rgba(255, 255, 255, 0.08);
    --glass-chip-bg-hover:   rgba(255, 255, 255, 0.14);
    --glass-chip-border:     rgba(255, 255, 255, 0.12);
    --glass-chip-border-hover: rgba(255, 255, 255, 0.20);
    --glass-chip-shadow-hover: 0 4px 16px rgba(99, 102, 241, 0.20);

    --glass-panel-bg:        rgba(255, 255, 255, 0.06);
    --glass-panel-bg-hover:  rgba(255, 255, 255, 0.10);
    --glass-panel-border:    rgba(255, 255, 255, 0.12);

    --glass-modal-bg:        rgba(14, 14, 22, 0.92);
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — warm cream surfaces
   ══════════════════════════════════════════════════════════════════ */
[data-mode="light"] {
    --bg:                #FAF6EE;
    --bg-deep:           #ffffff;

    /* Затемнённый amber для контраста на светлом фоне (= прототип --am:#D97706, --al:#F59E0B) */
    --mfa-amber:         #D97706;
    --mfa-amber-light:   #F59E0B;
    --primary-color:     #D97706;
    --primary-rgb:       217, 119, 6;
    --surface-1:         rgba(255, 250, 242, 0.92);
    --surface-2:         #ffffff;
    --surface-3:         rgba(255, 250, 242, 0.95);

    --fg-1:              #1F1A14;
    --fg-2:              #5C5045;
    --fg-3:              #8A7B6B;
    --fg-4:              #B89A78;
    --text-primary:      var(--fg-1);
    --text-secondary:    var(--fg-2);
    --text-tertiary:     var(--fg-3);

    --border-1:          rgba(38, 28, 18, 0.06);
    --border-2:          rgba(38, 28, 18, 0.10);
    --border-3:          rgba(38, 28, 18, 0.15);
    --hover-bg:          rgba(38, 28, 18, 0.04);

    --message-user-bg:   #FFFFFF;
    --message-ai-bg:     rgba(245, 158, 11, 0.06);

    --glass-chip-bg:         rgba(255, 255, 255, 0.65);
    --glass-chip-bg-hover:   rgba(255, 255, 255, 0.85);
    --glass-chip-border:     rgba(38, 28, 18, 0.08);
    --glass-chip-border-hover: rgba(38, 28, 18, 0.18);

    --glass-panel-bg:        rgba(255, 255, 255, 0.70);
    --glass-panel-bg-hover:  rgba(255, 255, 255, 0.85);
    --glass-panel-border:    rgba(38, 28, 18, 0.08);

    --glass-modal-bg:        rgba(255, 255, 255, 0.88);

    --shadow-sm:         0 1px 3px rgba(38, 28, 18, 0.05);
    --shadow-md:         0 4px 6px -1px rgba(38, 28, 18, 0.08);
    --shadow-lg:         0 10px 15px -3px rgba(38, 28, 18, 0.10);
    --shadow-card:       0 4px 24px rgba(38, 28, 18, 0.06);
    --shadow-glow:       0 8px 32px rgba(245, 158, 11, 0.25);
    --glow:              rgba(217, 119, 6, 0.20);
    --scene-overlay: linear-gradient(180deg,
        rgba(250, 246, 238, 0.25) 0%,
        rgba(250, 246, 238, 0.55) 35%,
        rgba(250, 246, 238, 0.85) 62%,
        var(--bg) 85%);
    --scene-dim: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

/* Light mode + Cool theme */
[data-theme="cool"][data-mode="light"] {
    --bg:       #f8fafc;
    --bg-deep:  #ffffff;
    --surface-1: rgba(255, 255, 255, 0.88);
    --surface-2: rgba(255, 255, 255, 0.72);
    --surface-3: rgba(255, 255, 255, 0.85);
    --fg-1:      #0f172a;
    --fg-2:      #334155;
    --fg-3:      #475569;
    --fg-4:      #64748b;
    --text-primary:   var(--fg-1);
    --text-secondary: var(--fg-2);
    --border-1:  rgba(0, 0, 0, 0.08);
    --border-2:  rgba(0, 0, 0, 0.10);
    --border-3:  rgba(0, 0, 0, 0.15);
    --hover-bg:  rgba(0, 0, 0, 0.04);
    --message-user-bg: #ffffff;
    --message-ai-bg:   rgba(99, 102, 241, 0.05);
}

/* ══════════════════════════════════════════════════════════════════
   BASE — применяем токены к html/body
   ══════════════════════════════════════════════════════════════════ */
html, body {
    font-family: var(--font-sans);
}

body {
    background: var(--bg);
    color: var(--fg-1);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Единая сцена: dim + scene-overlay + фото (как в «Поручениях») */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        var(--scene-dim),
        var(--scene-overlay),
        var(--bg-url, url('/bg-night.jpg')) center / cover no-repeat fixed;
}

[data-mode="light"] body::before,
[data-theme="cool"] body::before {
    background:
        var(--scene-dim),
        var(--scene-overlay),
        var(--bg-url, url('/bg-night.jpg')) center / cover no-repeat fixed;
}

/* ══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE UTILITIES (опционально, для новых компонентов)
   ══════════════════════════════════════════════════════════════════ */
.t-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.t-agent-name {
    background: var(--agent-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.t-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--primary-color);
}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR / NAV — Warm overrides (безопасно, не трогает структуру)
   ══════════════════════════════════════════════════════════════════ */

/* Шапка */
.topbar {
    background: var(--surface-1) !important;
    border-bottom-color: var(--border-2) !important;
    backdrop-filter: var(--glass-blur-panel);
    -webkit-backdrop-filter: var(--glass-blur-panel);
}

/* Активная вкладка навигации */
.topbar-nav-item.active,
.nav-item.active {
    color: var(--mfa-coral) !important;
    background: rgba(251, 146, 60, 0.12) !important;
    border-color: var(--border-3) !important;
}

/* Hover на вкладке */
.topbar-nav-item:hover,
.nav-item:hover {
    color: var(--fg-1) !important;
    background: var(--hover-bg) !important;
}

/* Bottom nav */
.bottom-nav {
    background: var(--surface-1) !important;
    border-top-color: var(--border-2) !important;
    backdrop-filter: var(--glass-blur-panel);
    -webkit-backdrop-filter: var(--glass-blur-panel);
}

.bottom-nav-item {
    color: var(--fg-3) !important;
}

.bottom-nav-item.active {
    color: var(--mfa-coral) !important;
}

/* Dropdown */
.topbar-dropdown {
    background: rgba(28, 16, 8, 0.96) !important;
    border-color: var(--border-2) !important;
    backdrop-filter: var(--glass-blur-modal);
    -webkit-backdrop-filter: var(--glass-blur-modal);
}

.topbar-dd-item:hover {
    background: rgba(251, 146, 60, 0.10) !important;
}

/* Light mode overrides для nav */
[data-mode="light"] .topbar {
    background: rgba(255, 250, 242, 0.92) !important;
    border-bottom-color: var(--border-2) !important;
}

[data-mode="light"] .bottom-nav {
    background: rgba(255, 250, 242, 0.92) !important;
    border-top-color: var(--border-2) !important;
}

[data-mode="light"] .topbar-nav-item.active,
[data-mode="light"] .nav-item.active {
    color: var(--mfa-terracotta) !important;
    background: rgba(217, 119, 87, 0.10) !important;
}

[data-mode="light"] .bottom-nav-item.active {
    color: var(--mfa-terracotta) !important;
}

[data-mode="light"] .topbar-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border-2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SEND / PRIMARY BUTTON — Warm gradient
   ══════════════════════════════════════════════════════════════════ */
.send-btn,
.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    box-shadow: var(--shadow-glow) !important;
}

.send-btn:hover,
.btn-primary:hover {
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.50) !important;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════
   CHIP SUGGESTION — Warm border
   ══════════════════════════════════════════════════════════════════ */
.chip,
.suggestion-chip {
    border-color: var(--border-2) !important;
    background: var(--glass-chip-bg) !important;
    color: var(--fg-1) !important;
    backdrop-filter: var(--glass-blur-chip);
    -webkit-backdrop-filter: var(--glass-blur-chip);
}

.chip:hover,
.suggestion-chip:hover {
    border-color: var(--border-3) !important;
    background: var(--glass-chip-bg-hover) !important;
}

/* ══════════════════════════════════════════════════════════════════
   BETA BADGE — Warm gradient
   ══════════════════════════════════════════════════════════════════ */
.beta-badge,
.beta-badge-wrap {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.30) !important;
}

/* ══════════════════════════════════════════════════════════════════
   THEME-COLOR META — меняем для корректного PWA цвета
   Это CSS-only, meta tag обновляется через JS если нужно
   ══════════════════════════════════════════════════════════════════ */