/* =============================================================================
   Dereal Voice App — Base
   Single source of truth for tokens, reset, typography, accessibility, scroll.
   Loaded by ALL pages. Contains NO component styles (those live in components.css).
   ============================================================================= */

/* =============================================================================
   1. Design Tokens
   ============================================================================= */

:root {
    /* ---- Elemental palette (preserved) ---- */
    --earth: #8B7355;
    --earth-light: #A69076;
    --water: #5B8FA8;
    --water-light: #7BA7BD;
    --fire: #D4763A;
    --fire-light: #E8935A;
    --air: #87A889;
    --air-light: #A3BDA4;
    --ether: #9B8AA8;
    --ether-light: #B5A7BF;

    /* ---- Surfaces (canonical) ---- */
    --bg-dark: #0a0a0f;          /* page background */
    --bg-card: #12121a;           /* default card surface */
    --bg-elevated: #1a1a24;       /* elevated card / popover */

    /* Aliases kept for backward compatibility with existing markup.
       New code should prefer --bg-dark / --bg-card / --bg-elevated. */
    --bg-primary: var(--bg-dark);
    --bg-secondary: var(--bg-card);
    --bg-tertiary: var(--bg-elevated);
    --surface-base: var(--bg-dark);
    --surface-elevated: var(--bg-card);
    --surface-subtle: var(--bg-elevated);

    /* ---- Text ---- */
    --text-primary: #E8E6E3;
    --text-secondary: #A09A92;
    --text-muted: #6B665E;

    /* ---- Accents ---- */
    --accent: #C4A77D;             /* warm gold — primary brand accent */
    --accent-warm: #C8A77D;
    --accent-gold: #D4B896;
    --accent-glow: rgba(196, 167, 125, 0.3);
    --accent-primary: #6366f1;     /* indigo — interactive accent */
    --accent-secondary: #8b5cf6;   /* violet — gradient pair */

    /* ---- Borders ---- */
    --border-color: #3a3a42;
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* ---- Status ---- */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-danger:  #ef4444;
    --status-info:    var(--accent-primary);

    /* ---- Status aliases (used by sub-pages) ---- */
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-calm: #818cf8;
    --accent-primary-hover: #4f46e5;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --error: #ef4444;
    --info: #6366f1;

    /* ---- Companion colors (semantic) ---- */
    --compass-color: var(--air);
    --flora-color:   var(--earth);
    --alethea-color: var(--ether);
    --eirene-color:  var(--water);
    --socius-color:  var(--fire);
    --echo-color:    var(--ether);

    /* ---- Chat message backgrounds ---- */
    --message-user-bg: #2a2a32;
    --message-ai-bg: #1e1e24;

    /* ---- Shadows ---- */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* ---- Spacing ---- */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* ---- Typography ---- */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Crimson Pro', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

    /* ---- Radii ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ---- Transitions ---- */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* ---- Gradients ---- */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    --gradient-accent:  linear-gradient(135deg, var(--accent), var(--accent-gold));
}

/* =============================================================================
   2. Light Theme (complete override — covers ALL surface tokens)
   ============================================================================= */

[data-theme="light"] {
    --bg-dark:     #F5F3F0;
    --bg-card:     #FFFFFF;
    --bg-elevated: #F0EDE8;

    /* keep aliases in sync */
    --bg-primary:   var(--bg-dark);
    --bg-secondary: var(--bg-card);
    --bg-tertiary:  var(--bg-elevated);
    --surface-base:     var(--bg-dark);
    --surface-elevated: var(--bg-card);
    --surface-subtle:   var(--bg-elevated);

    --text-primary:   #2C2A28;
    --text-secondary: #5A5652;
    --text-muted:     #8A867E;

    --accent:       #9B7D4D;
    --accent-warm:  #A8865A;
    --accent-gold:  #B89660;
    --accent-glow:  rgba(155, 125, 77, 0.2);

    --border-color:  #D5D0C8;
    --border-subtle: rgba(0, 0, 0, 0.06);

    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --message-user-bg: #E8E5E0;
    --message-ai-bg:   #FFFFFF;
}

/* =============================================================================
   3. Tone-Field Adaptation
   Subtle accent shifts based on emotional tone_field. Transitions scoped to
   specific properties on body only — NOT every descendant — to avoid laggy hovers.
   ============================================================================= */

body {
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

body.tone-grounded { --accent-primary: #8B7355; --glow-primary: rgba(139, 115, 85, 0.25); }
body.tone-fluid    { --accent-primary: #5B8FA8; --glow-primary: rgba(91, 143, 168, 0.25); }
body.tone-radiant  { --accent-primary: #C8A050; --glow-primary: rgba(200, 160, 80, 0.25); }
body.tone-clear    { --accent-primary: #A0B8C8; --glow-primary: rgba(160, 184, 200, 0.25); }
body.tone-silent   { --accent-primary: #9080B0; --glow-primary: rgba(144, 128, 176, 0.25); }

/* =============================================================================
   4. Reset
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;          /* dynamic viewport height for mobile */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* DEFAULT: scrollable. The chat page opts out by adding class="chat-page". */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Chat page is the ONE exception — it manages its own internal scroll regions. */
body.chat-page {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-gold);
}

/* =============================================================================
   5. Typography
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.5vw + 0.9rem, 1.875rem); }
h3 { font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.4rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

p {
    line-height: 1.6;
    color: var(--text-secondary);
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* =============================================================================
   6. Elemental Tags (preserved utility)
   ============================================================================= */

.element {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-2xl);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
}

.element.earth { background: var(--earth); }
.element.water { background: var(--water); }
.element.fire  { background: var(--fire); }
.element.air   { background: var(--air); }
.element.ether { background: var(--ether); }

/* =============================================================================
   7. Accessibility
   ============================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   8. Shared Animations (used by components.css and pages)
   ============================================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}