/* =============================================================================
   TOGASHI Design System — CSS Variables (Design Tokens)
   
   Dark theme (Nocturnal Heritage) = DEFAULT
   Light theme (Heritage Editorial) = [data-theme="light"]
   
   Extracted from Dark-Mode.md and Light-Mode.md specs.
   ============================================================================= */

/* --- DARK THEME (Default) — Nocturnal Heritage --- */
:root,
[data-theme="dark"] {
    /* Surfaces */
    --color-surface: #0d0d0d;
    --color-surface-dim: #0d0d0d;
    --color-surface-bright: #262626;
    --color-surface-container-lowest: #050505;
    --color-surface-container-low: #121212;
    --color-surface-container: #1a1a1a;
    --color-surface-container-high: #262626;
    --color-surface-container-highest: #333333;

    /* On-surfaces (text on surfaces) */
    --color-on-surface: #f5f5f0;
    --color-on-surface-variant: #c5c4bf;
    --color-inverse-surface: #f5f5f0;
    --color-inverse-on-surface: #1a1a1a;
    --color-on-background: #f5f5f0;

    /* Outline */
    --color-outline: #404040;
    --color-outline-variant: #262626;

    /* Primary (Red) */
    --color-primary: #7b0000;
    --color-on-primary: #f5f5f0;
    --color-primary-container: #520000;
    --color-on-primary-container: #ff8b7c;
    --color-inverse-primary: #b02d1f;
    --color-surface-tint: #7b0000;

    /* Primary fixed */
    --color-primary-fixed: #ffdad4;
    --color-primary-fixed-dim: #7b0000;
    --color-on-primary-fixed: #410000;
    --color-on-primary-fixed-variant: #8e120a;

    /* Secondary (Gold) */
    --color-secondary: #f5a623;
    --color-on-secondary: #0d0d0d;
    --color-secondary-container: #b37400;
    --color-on-secondary-container: #ffddb4;
    --color-secondary-fixed: #ffdea5;
    --color-secondary-fixed-dim: #f5a623;

    /* Tertiary */
    --color-tertiary: #c8c6c5;
    --color-on-tertiary: #313030;
    --color-tertiary-container: #3a3a3a;
    --color-on-tertiary-container: #a5a4a3;

    /* Error */
    --color-error: #ffb4ab;
    --color-on-error: #690005;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;

    /* Background */
    --color-background: #0d0d0d;

    /* Surface variant */
    --color-surface-variant: #1a1a1a;

    /* Shadows */
    --shadow-litho: 0 4px 20px rgba(123, 0, 0, 0.15);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Divider */
    --color-divider: rgba(245, 245, 240, 0.1);
}

/* --- LIGHT THEME — Heritage Editorial --- */
[data-theme="light"] {
    /* Surfaces */
    --color-surface: #faf9f5;
    --color-surface-dim: #dbdad6;
    --color-surface-bright: #faf9f5;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f4f0;
    --color-surface-container: #efeeea;
    --color-surface-container-high: #e9e8e4;
    --color-surface-container-highest: #e3e2df;

    /* On-surfaces */
    --color-on-surface: #1b1c1a;
    --color-on-surface-variant: #59413d;
    --color-inverse-surface: #2f312e;
    --color-inverse-on-surface: #f2f1ed;
    --color-on-background: #1b1c1a;

    /* Outline */
    --color-outline: #8d706c;
    --color-outline-variant: #e1bfb9;

    /* Primary (Deep Crimson) */
    --color-primary: #520000;
    --color-on-primary: #ffffff;
    --color-primary-container: #7b0000;
    --color-on-primary-container: #ff7d6a;
    --color-inverse-primary: #ffb4a8;
    --color-surface-tint: #b02d1f;

    /* Primary fixed */
    --color-primary-fixed: #ffdad4;
    --color-primary-fixed-dim: #ffb4a8;
    --color-on-primary-fixed: #410000;
    --color-on-primary-fixed-variant: #8e120a;

    /* Secondary (Antique Gold) */
    --color-secondary: #775a19;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fed488;
    --color-on-secondary-container: #785a1a;
    --color-secondary-fixed: #ffdea5;
    --color-secondary-fixed-dim: #e9c176;

    /* Tertiary */
    --color-tertiary: #252424;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #3a3a3a;
    --color-on-tertiary-container: #a5a4a3;

    /* Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Background */
    --color-background: #faf9f5;

    /* Surface variant */
    --color-surface-variant: #e3e2df;

    /* Shadows — Lithographic style */
    --shadow-litho: 0 4px 20px rgba(82, 0, 0, 0.05);
    --shadow-card: 0 10px 30px rgba(82, 0, 0, 0.08);

    /* Divider */
    --color-divider: rgba(29, 28, 26, 0.1);
}

/* =============================================================================
   Typography Tokens
   ============================================================================= */

:root {
    /* Font families */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', 'Source Serif 4', sans-serif;
    --font-label: 'Hanken Grotesk', 'Source Sans 3', sans-serif;
    --font-chat: 'Source Serif 4', Georgia, serif;

    /* Display Large */
    --text-display-lg-size: 48px;
    --text-display-lg-weight: 700;
    --text-display-lg-line: 1.1;
    --text-display-lg-spacing: -0.02em;

    /* Display Large (Dark mode uses 64px) */
    --text-display-lg-dark-size: 64px;

    /* Display Large Mobile */
    --text-display-lg-mobile-size: 32px;
    --text-display-lg-mobile-weight: 700;
    --text-display-lg-mobile-line: 1.2;

    /* Headline Large */
    --text-headline-lg-size: 32px;
    --text-headline-lg-weight: 600;
    --text-headline-lg-line: 1.3;

    /* Headline Medium */
    --text-headline-md-size: 24px;
    --text-headline-md-weight: 600;
    --text-headline-md-line: 1.4;

    /* Body Large */
    --text-body-lg-size: 18px;
    --text-body-lg-weight: 400;
    --text-body-lg-line: 1.6;

    /* Body Medium */
    --text-body-md-size: 16px;
    --text-body-md-weight: 400;
    --text-body-md-line: 1.6;

    /* Label Caps */
    --text-label-size: 12px;
    --text-label-weight: 700;
    --text-label-line: 1.0;
    --text-label-spacing: 0.1em;

    /* Chat Bubble */
    --text-chat-size: 15px;
    --text-chat-weight: 400;
    --text-chat-line: 1.4;

    /* =============================================================================
       Spacing Tokens (8px base grid)
       ============================================================================= */
    --spacing-unit: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 120px;

    --container-max: 1200px;
    --gutter: 24px;
    --margin-mobile: 20px;
    --margin-desktop: 64px;
    --chat-gap: 12px;

    /* =============================================================================
       Border Radius
       ============================================================================= */
    --radius-none: 0;
    --radius-sm: 0.125rem;  /* 2px */
    --radius-default: 0.25rem;  /* 4px */
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-full: 9999px;

    /* =============================================================================
       Transitions
       ============================================================================= */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 700ms ease;

    /* =============================================================================
       Z-index scale
       ============================================================================= */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-tooltip: 60;
    --z-chat: 70;
}