/**
 * Design Tokens - Kadley Portfolio
 * Gothic Neon Victorian color system, typography, spacing, and effects.
 *
 * Color palette derived from the Ice Blue spider lily background asset:
 * - Deep blacks for the dark gothic base
 * - Neon blues/ice for glow accents
 * - Magenta for secondary neon highlights
 * - Warm gold for Victorian ornamental touches
 */

/* ---------- Font Face ---------- */

@font-face {
    font-family: 'Victorian Parlor';
    src: url('../fonts/victorian/Victorian Parlor Vintage Alternate_free.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Victorian Ornaments';
    src: url('../fonts/ornaments/VictorianOrnaments.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------- Root Variables ---------- */

:root {
    /* --- Colors: Backgrounds --- */
    --bg-primary: #07070d;
    --bg-secondary: #0e0e18;
    --bg-card: #111122;
    --bg-elevated: #16162a;

    /* --- Colors: Neon Accents --- */
    --neon-blue: #4da8ff;
    --neon-blue-bright: #6ec0ff;
    --neon-ice: #7ec8ff;
    --neon-magenta: #c850c0;
    --neon-magenta-soft: #a040a0;
    --neon-pink: #ff1493;
    /* Deep pink */
    --glow-pink: 0 0 10px rgba(255, 20, 147, 0.7), 0 0 20px rgba(255, 20, 147, 0.5);

    /* --- Colors: Victorian Accents --- */
    --gold: #c9a84c;
    --gold-bright: #e0c068;
    --gold-dim: #8a7030;

    /* --- Colors: Text --- */
    --text-primary: #e8e0d4;
    --text-secondary: #9a96a8;
    --text-muted: #5c5a6a;

    /* --- Colors: Borders & Glow --- */
    --border-subtle: rgba(77, 168, 255, 0.12);
    --border-glow: rgba(77, 168, 255, 0.3);
    --border-gold: rgba(201, 168, 76, 0.3);

    /* --- Typography --- */
    --font-display: 'Victorian Parlor', 'Georgia', serif;
    --font-body: 'Times New Roman', 'Times', 'Georgia', serif;

    --fs-display: clamp(2.4rem, 5vw, 4.5rem);
    --fs-h1: clamp(2rem, 4vw, 3.5rem);
    --fs-h2: clamp(1.6rem, 3vw, 2.5rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.75rem);
    --fs-body: clamp(1rem, 1.2vw, 1.15rem);
    --fs-small: clamp(0.85rem, 1vw, 0.95rem);
    --fs-nav: clamp(0.9rem, 1.1vw, 1.05rem);

    /* --- Spacing --- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-section: clamp(2.5rem, 5vw, 4.5rem);

    /* --- Layout --- */
    --max-width: 1200px;
    --max-width-narrow: 800px;
    --nav-height: 72px;
    --border-radius: 4px;

    /* --- Glow Effects --- */
    --glow-blue: 0 0 8px rgba(77, 168, 255, 0.4),
        0 0 24px rgba(77, 168, 255, 0.15),
        0 0 48px rgba(77, 168, 255, 0.05);

    --glow-blue-strong: 0 0 8px rgba(77, 168, 255, 0.6),
        0 0 24px rgba(77, 168, 255, 0.3),
        0 0 64px rgba(77, 168, 255, 0.1);

    --glow-magenta: 0 0 8px rgba(200, 80, 192, 0.4),
        0 0 24px rgba(200, 80, 192, 0.15);

    --glow-gold: 0 0 8px rgba(201, 168, 76, 0.35),
        0 0 20px rgba(201, 168, 76, 0.12);

    --text-glow-blue: 0 0 6px rgba(77, 168, 255, 0.5),
        0 0 20px rgba(77, 168, 255, 0.2);

    --text-glow-gold: 0 0 6px rgba(201, 168, 76, 0.5),
        0 0 16px rgba(201, 168, 76, 0.15);

    /* --- Transitions --- */
    --transition-fast: 200ms ease;
    --transition-base: 350ms ease;
    --transition-slow: 600ms ease;
    --transition-glow: 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}