/* ===================================================================
   HEARTH THEME — Design System Foundation
   "The Hearth - Keeper of the Flame"

   Overrides CSS custom properties from shared themes.css
   so all shared components automatically inherit the warm palette.
   =================================================================== */

:root {
    /* === Primary Palette (from experience-design.json) === */
    --color-primary: #5D4037;
    --color-primary-dark: #3E2723;
    --color-primary-light: #795548;
    --color-secondary: #D7A86E;
    --color-secondary-light: #E8C9A0;
    --color-secondary-dark: #B8894A;
    --color-accent: #8D6E63;
    --color-accent-light: #A1887F;
    --color-accent-dark: #6D4C41;

    /* === Text Colors === */
    --color-text: #3E2723;
    --color-text-secondary: #5D4037;
    --color-text-muted: #6D5949;
    --color-text-light: #A1887F;
    --color-text-inverse: #FAF8F5;

    /* === Backgrounds === */
    --color-bg: #FAF8F5;
    --color-bg-secondary: #EFEBE9;
    --color-bg-dark: #3E2723;
    --card-bg: #FFFFFF;
    --sidebar-bg: #3E2723;
    --hover-bg: rgba(93, 64, 55, 0.06);
    --active-bg: rgba(215, 168, 110, 0.15);

    /* === Borders & Lines === */
    --border-color: #D7CCC8;
    --border-ornate: 2px solid #D7A86E;
    --border-ornate-thick: 3px solid #D7A86E;

    /* === Status Colors === */
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-error: #F44336;
    --color-info: #5D4037;
    --color-focus: #B07830;

    /* === Feedback Colors === */
    --success-bg: #E8F5E9;
    --success-text: #2E7D32;
    --error-bg: #FFEBEE;
    --error-text: #C62828;
    --warning-bg: #FFF3E0;
    --warning-text: #E65100;

    /* === Module Zone Colors === */
    --zone-1-color: #5D4037;  /* The Gathering Hall */
    --zone-2-color: #795548;  /* The Legacy Room */
    --zone-3-color: #8D6E63;  /* The Empathy Chamber */
    --zone-4-color: #D7A86E;  /* The Counselor's Study */
    --zone-5-color: #E8C9A0;  /* The Hearth Core */
    --zone-1-bg: rgba(93, 64, 55, 0.1);
    --zone-2-bg: rgba(121, 85, 72, 0.1);
    --zone-3-bg: rgba(141, 110, 99, 0.1);
    --zone-4-bg: rgba(215, 168, 110, 0.1);
    --zone-5-bg: rgba(232, 201, 160, 0.1);

    /* === Typography === */
    --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family: var(--font-body);

    /* === Hearth-Specific Design Tokens === */
    --shadow-warm: 0 4px 20px rgba(62, 39, 35, 0.25);
    --shadow-warm-lg: 0 8px 40px rgba(62, 39, 35, 0.35);
    --shadow-warm-inset: inset 0 0 30px rgba(62, 39, 35, 0.12);
    --gradient-hearth: linear-gradient(135deg, #4E342E, #6D4C41, #D7A86E);
    --gradient-hearth-dark: linear-gradient(135deg, #2C1810, #3E2723, #4E342E);
    --parchment-bg: linear-gradient(160deg, #FFF5E8 0%, #F0DCC4 50%, #E8D0B0 100%);
    --parchment-bg-subtle: linear-gradient(160deg, #FDF6EE 0%, #F5E8D8 100%);
    --leather-border: 6px solid #2C1810;
    --leather-border-radius: 4px;
    --warm-vignette: radial-gradient(ellipse at center, transparent 50%, rgba(44, 24, 16, 0.2) 100%);

    /* === Video Player Overrides === */
    --color-player-bg: #3E2723;
    --color-player-bg-gradient: #5D4037;
    --color-player-accent: #D7A86E;
    --color-player-accent-hover: #B8894A;
    --color-player-accent-light: #E8C9A0;
    --color-player-accent-rgb: 215, 168, 110;

    /* === Transition === */
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Global Hearth Overrides === */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    line-height: 1.3;
}

h1 { font-weight: 900; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 700; }

a {
    color: var(--color-primary);
    text-decoration-color: var(--color-secondary);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration-color: var(--color-primary);
}

a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

::selection {
    background: rgba(215, 168, 110, 0.35);
    color: var(--color-primary-dark);
}

/* Skip link warm styling */
.skip-link:focus {
    background: var(--color-primary-dark);
    color: var(--color-secondary);
}