/**
 * Albireo - CSS Variables
 * Design system: Night sky theme — professional yet warm and accessible
 */

:root {
    /* ─── Core Palette ─── */
    --night-sky: #0a0e1a;
    --deep-blue: #121a2e;
    --midnight: #0f1525;
    --soft-gold: #d4a574;
    --gold-light: #e8c9a0;
    --gold-dim: #a07850;
    --warm-white: #faf8f5;
    --light-text: #b8bcc6;
    --subtle-border: #1e2a40;
    --card-bg: rgba(255, 255, 255, 0.025);
    --card-bg-hover: rgba(255, 255, 255, 0.05);
    --overlay-dark: rgba(10, 14, 26, 0.75);
    --overlay-darker: rgba(10, 14, 26, 0.88);

    /* ─── Accent & Status ─── */
    --accent-blue: #5b8fb9;
    --accent-rgb: 212, 165, 116;
    --success: #5cb87a;
    --error: #d96b6b;
    --warning: #d4a574;

    /* ─── Typography ─── */
    --font-display: 'Crimson Pro', 'Georgia', serif;
    --font-body: 'Assistant', 'Helvetica Neue', sans-serif;

    /* ─── Font Sizes ─── */
    --fs-hero: 5rem;
    --fs-hero-sub: 1.5rem;
    --fs-section-title: 2.6rem;
    --fs-section-intro: 1.15rem;
    --fs-card-title: 1.25rem;
    --fs-body: 1.1rem;
    --fs-small: 0.92rem;
    --fs-tiny: 0.82rem;

    /* ─── Spacing ─── */
    --spacing-section: 120px;
    --spacing-large: 60px;
    --spacing-medium: 35px;
    --spacing-small: 16px;
    --spacing-xs: 8px;

    /* ─── Container ─── */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-padding: 5%;

    /* ─── Border Radius ─── */
    --radius-xs: 4px;
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 20px;
    --radius-round: 50px;

    /* ─── Shadows ─── */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 30px rgba(var(--accent-rgb), 0.15);
    --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.5);

    /* ─── Transitions ─── */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ─── */
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* ─── Responsive Overrides ─── */
@media (max-width: 1024px) {
    :root {
        --fs-hero: 3.8rem;
        --fs-hero-sub: 1.3rem;
        --fs-section-title: 2.2rem;
        --spacing-section: 90px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-hero: 2.6rem;
        --fs-hero-sub: 1.1rem;
        --fs-section-title: 1.9rem;
        --fs-body: 1.05rem;
        --spacing-section: 70px;
        --container-padding: 6%;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-hero: 2.1rem;
        --fs-section-title: 1.6rem;
        --spacing-section: 55px;
    }
}