/* ===== variables.css ===== */
/* Theme variables, dark mode, accent colors */
/* MUST load first — all other stylesheets reference these */

/* ===== Warm Theme Palette ===== */
:root,
[data-theme="light"][data-tone="warm"] {
    --bg-primary: #f5f1ec;
    --bg-secondary: #fffdfa;
    --bg-tertiary: #ece6dd;
    --text-primary: #2a2422;
    --text-secondary: #6b635c;
    --border: #ddd5ca;
    --code-bg: #ece6dd;
    --asst-bubble: #fffdfa;
    --input-bg: #fffdfa;
    --scrollbar: #d4ccc0;

    /* Supporting shades derived from the warm palette. */
    --bg-hover: #e5ded5;
    --text-tertiary: #8a8179;
    --border-light: #ebe4db;
    --scrollbar-hover: #b8aea1;
    --surface-glass: rgba(255, 253, 250, 0.70);
    --surface-glass-strong: rgba(255, 253, 250, 0.95);
    --canvas-grid: rgba(42, 36, 34, 0.08);
}

[data-theme="dark"][data-tone="warm"] {
    --bg-primary: #1F1F1F;
    --bg-secondary: #191919;
    --bg-tertiary: #3C3C3C;
    --text-primary: #F5F3F1;
    --text-secondary: #a39c95;
    --border: #343434;
    --code-bg: #262626;
    --asst-bubble: #262626;
    --input-bg: #2D2D2D;
    --scrollbar: #423d39;

    /* Supporting shades derived from the warm palette. */
    --bg-hover: #343434;
    --text-tertiary: #7f7770;
    --border-light: #292929;
    --scrollbar-hover: #5a534d;
    --surface-glass: rgba(31, 31, 31, 0.70);
    --surface-glass-strong: rgba(31, 31, 31, 0.95);
    --canvas-grid: rgba(245, 243, 241, 0.05);
}

/* ===== CSS Variables ===== */
:root {
    /* Backwards-compatible aliases used throughout the application. */
    --color-bg-primary: var(--bg-primary);
    --color-bg-secondary: var(--bg-secondary);
    --color-bg-tertiary: var(--bg-tertiary);
    --color-bg-hover: var(--bg-hover);
    
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);
    
    --color-border: var(--border);
    --color-border-light: var(--border-light);
    --border-color: var(--border);
    
    --color-accent: #0f172a;
    --color-accent-hover: #1e293b;
    --color-accent-light: #334155;
    
    --color-success: #059669;
    --color-warning: #d97706;
    
    /* Content font size */
    --content-font-size: 16px;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Courier New', monospace;
    
    /* Sizes */
    --sidebar-width: 64px;
    --border-radius: 8px;
    --border-radius-sm: 6px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scrollbar-color: var(--scrollbar) transparent;
}

/* ===== Accent Colors ===== */
[data-accent="slate"] {
    --color-accent: #212121;
    --color-accent-hover: #000000;
    --color-accent-light: #000;
}

[data-theme="dark"][data-tone="warm"][data-accent="slate"] {
    --color-accent: #6b635c;
    --color-accent-hover: #7a716a;
    --color-accent-light: #423d39;
}

[data-accent="blue"] {
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-light: #3b82f6;
}

[data-accent="purple"] {
    --color-accent: #7c3aed;
    --color-accent-hover: #6d28d9;
    --color-accent-light: #8b5cf6;
}

[data-accent="green"] {
    --color-accent: #059669;
    --color-accent-hover: #047857;
    --color-accent-light: #10b981;
}

[data-accent="orange"] {
    --color-accent: #ea580c;
    --color-accent-hover: #c2410c;
    --color-accent-light: #f97316;
}

[data-accent="pink"] {
    --color-accent: #db2777;
    --color-accent-hover: #be185d;
    --color-accent-light: #ec4899;
}

[data-accent="teal"] {
    --color-accent: #0d9488;
    --color-accent-hover: #0f766e;
    --color-accent-light: #14b8a6;
}

[data-accent="red"] {
    --color-accent: #dc2626;
    --color-accent-hover: #b91c1c;
    --color-accent-light: #ef4444;
}