/* Gold on Midnight — design tokens */

:root {
    /* ── Core palette ── */
    --bg:#090d18; --bg-2:#0b1124; --panel:#101830; --panel-2:#0d1426;
    --ink:#edf0f8; --muted:rgba(237,240,248,.60); --faint:rgba(237,240,248,.38);
    --gold:#d8b36a; --gold-bright:#ecc97f; --gold-dim:rgba(216,179,106,.22);
    --oxblood:#c1545c; --oxblood-deep:#8f343c;
    --blue:#5b86e8;
    --line:rgba(216,179,106,.18); --hair:rgba(237,240,248,.09);
    --r:14px;

    /* ── Typography ── */
    --disp:'Fraunces',Georgia,serif;
    --serif:'Spectral',Georgia,serif;
    --mono:'Spline Sans Mono',ui-monospace,monospace;

    /* ── Compatibility aliases (used by typography/main/components — rewritten in later tasks) ── */

    /* Backgrounds */
    --bg-primary: var(--bg);
    --bg-elevated: var(--panel);
    --bg-subtle: var(--panel-2);

    /* Navy scale → panel/bg scale */
    --color-navy-900: var(--bg);
    --color-navy-800: var(--bg-2);
    --color-navy-700: var(--panel);
    --color-navy-600: var(--panel-2);

    /* Slate scale → ink/muted/faint */
    --color-slate-200: var(--muted);
    --color-slate-100: var(--faint);
    --color-slate-50: rgba(237,240,248,.22);

    /* White */
    --color-white: #ffffff;

    /* Text */
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-text-light: var(--faint);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --text-tertiary: var(--faint);

    /* Accent → blue */
    --color-accent: var(--blue);
    --color-accent-dark: #3b69c8;
    --color-accent-light: rgba(91,134,232,.10);
    --color-accent-glow: rgba(91,134,232,.20);

    /* Gold */
    --color-gold: var(--gold);
    --color-gold-bg: rgba(216,179,106,.10);
    --color-gold-border: var(--gold);

    /* Borders */
    --color-border: var(--line);
    --color-border-light: var(--hair);
    --border-subtle: var(--hair);

    /* Font families */
    --font-sans: var(--serif);
    --font-serif: var(--serif);
    --font-mono: var(--mono);

    /* Layout */
    --sidebar-width: 280px;
    --right-rail-width: 240px;
    --content-max-width: 72ch;

    /* Border radius */
    --border-radius: var(--r);
    --border-radius-sm: 6px;
    --border-radius-lg: var(--r);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
    --shadow-md: 0 4px 12px -2px rgba(0,0,0,.40), 0 2px 6px -2px rgba(0,0,0,.25);
    --shadow-lg: 0 12px 28px -6px rgba(0,0,0,.55), 0 4px 12px -4px rgba(0,0,0,.30);
    --shadow-xl: 0 20px 40px -8px rgba(0,0,0,.65), 0 8px 16px -6px rgba(0,0,0,.35);
    --shadow-accent: 0 4px 14px -3px rgba(91,134,232,.30);
    --shadow-gold: 0 4px 14px -3px rgba(216,179,106,.28);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background: rgba(91,134,232,.22);
    color: var(--ink);
}

/* ── Page Transition ── */

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.content-wrapper {
    animation: pageEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scroll Reveal ── */

.stat-card,
.guide-card,
.episode-card,
.padrao-card,
.evidencia-card,
.person-card,
.comm-card,
.nota-wrapper,
.intensity-section,
.guide-section,
.notas-intro,
.padroes-intro,
.evidencias-intro,
.comm-intro {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-card.revealed,
.guide-card.revealed,
.episode-card.revealed,
.padrao-card.revealed,
.evidencia-card.revealed,
.person-card.revealed,
.comm-card.revealed,
.nota-wrapper.revealed,
.intensity-section.revealed,
.guide-section.revealed,
.notas-intro.revealed,
.padroes-intro.revealed,
.evidencias-intro.revealed,
.comm-intro.revealed {
    opacity: 1;
    transform: translateY(0);
}