/* ==========================================================================
   QuantaBible design tokens
   Single source of truth for color, spacing, type, shadows, radii.
   Rule: no hex colors anywhere else — components consume these variables.
   Themes: light (default) / [data-theme="sepia"] / [data-theme="dark"]
   ========================================================================== */

:root {
    /* Backgrounds */
    --bg-primary: #F5F0E8;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFBF7;
    --bg-sidebar: #EDE8DD;
    --bg-input: #FAFAF7;

    /* Text */
    --text-primary: #2D2A24;
    --text-secondary: #6B5C50;  /* WCAG AA 4.5:1 on bg-primary */
    --text-muted: #74685C;      /* WCAG AA 4.5:1 on bg-primary */
    --text-heading: #5C4A1E;

    /* Brand */
    --brand-olive: #4A6741;
    --brand-olive-hover: #3B5334;
    --brand-olive-light: #E8F0E6;
    --brand-gold: #6B5B2A;
    --brand-gold-light: #F0EBDD;

    /* Accent */
    --accent-warm: #C17A50;
    --accent-warm-light: #FAF0EA;

    /* Semantic status colors (theme-aware) */
    --success: #3F7A4E;
    --success-bg: #E4F0E6;
    --warning: #A8700F;
    --warning-bg: #F8EEDD;
    --danger: #B44A3E;
    --danger-bg: #F9E9E6;
    --info: #3E6B8A;
    --info-bg: #E6EEF4;

    /* Borders */
    --border-light: #E5DFD3;
    --border-medium: #D4CCBB;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(61, 52, 37, 0.06);
    --shadow-md: 0 4px 12px rgba(61, 52, 37, 0.08);
    --shadow-lg: 0 8px 24px rgba(61, 52, 37, 0.12);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(107, 91, 42, 0.18);

    /* Legacy aliases (backward compat) */
    --color-bg: var(--bg-primary);
    --color-surface: var(--bg-card);
    --color-surface-alt: var(--bg-sidebar);
    --color-border: var(--border-light);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-accent: var(--brand-gold);
    --color-accent-light: var(--brand-gold-light);
    --color-cta: var(--brand-olive);
    --color-cta-hover: var(--brand-olive-hover);
    --color-cta-text: #ffffff;
    --color-danger: var(--danger);
    color-scheme: light;
}

/* ===== Sepia theme ===== */
:root[data-theme="sepia"] {
    --bg-primary: #EEE3CE;
    --bg-card: #F5EDD9;
    --bg-card-hover: #F0E6CC;
    --bg-sidebar: #E8DCC2;
    --bg-input: #F0E6CC;
    --text-primary: #2A241B;
    --text-secondary: #5A4E3E;
    --text-muted: #6B5E4E;
    --text-heading: #4A3E26;
    --brand-gold-light: #E8DCC2;
    --brand-olive-light: #DBE6D6;
    --accent-warm-light: #E8D9C6;
    --success-bg: #DCE8D4;
    --warning-bg: #EFE0C0;
    --danger-bg: #EDD8CE;
    --info-bg: #D8E2E8;
    --border-light: #D4C8B0;
    --border-medium: #B5A68A;
    color-scheme: light;
}

/* ===== Dark theme ===== */
:root[data-theme="dark"] {
    --bg-primary: #1B1815;
    --bg-card: #2A241F;
    --bg-card-hover: #332C26;
    --bg-sidebar: #221D18;
    --bg-input: #2E2822;
    --text-primary: #E8E1D3;
    --text-secondary: #B8AE9D;
    --text-muted: #8F8676;
    --text-heading: #D4BD82;
    --brand-olive: #6A8D60;
    --brand-olive-hover: #7DA273;
    --brand-olive-light: #2A3D25;
    --brand-gold: #C9A961;
    --brand-gold-light: #3D3524;
    --accent-warm: #D89A78;
    --accent-warm-light: #3D2E24;
    --success: #7BAF87;
    --success-bg: #25372A;
    --warning: #D9A84E;
    --warning-bg: #3A3122;
    --danger: #E07563;
    --danger-bg: #3E2823;
    --info: #7FA6C4;
    --info-bg: #26333E;
    --border-light: #3A332D;
    --border-medium: #4A4038;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(201, 169, 97, 0.25);
    color-scheme: dark;
}

/* ===== Shared tokens (non-color) — apply to every theme ===== */
:root {
    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-reading: 'Lora', Georgia, serif;
    --font-ui: var(--font-body);
    --font-display: var(--font-heading);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    /* Breakpoint reference (for docs; media queries can't use vars):
       sm 640px / md 768px / lg 1024px / xl 1280px */

    --nav-height: 56px;
}