/* ==========================================
   CSS DESIGN TOKENS
========================================== */
/* NOTE: Google Fonts (Playfair Display, Lora) are loaded
   via <link> tags in index.html for optimal render performance. */
:root {

    /* Classical Palette (Ivory, Deep Navy & Brass Gold) */
    --primary: #b08d3e;
    --primary-hover: #97742f;
    --primary-dark: #7c5f26;
    --secondary: #1f3a5f;
    --accent: #8a5a2b;
    --emerald-glow: #5f7d5f;

    --success: #4a7c59;
    --warning: #b08d3e;
    --danger: #a03a2f;

    --white: #ffffff;
    --black: #000000;

    /* Ivory Theme Tokens (Default: Warm Paper) */
    --background: #faf7f0;
    --background-light: #f3ede0;
    --background-card: rgba(255, 253, 248, 0.92);

    --card: rgba(255, 253, 248, 0.92);
    --card-solid: #fffdf8;
    --card-hover: #f6efdf;

    --text: #1c2530;
    --text-light: #45515f;
    --text-muted: #75808f;

    --border: rgba(28, 37, 48, 0.12);
    --border-hover: rgba(176, 141, 62, 0.5);

    --glass: rgba(255, 253, 248, 0.9);
    --glass-border: rgba(28, 37, 48, 0.1);

    /* Refined Gradients */
    --gradient-primary: linear-gradient(135deg, #1f3a5f 0%, #2c5282 60%, #1f3a5f 100%);
    --gradient-text: linear-gradient(135deg, #1f3a5f 0%, #b08d3e 100%);
    --gradient-accent: linear-gradient(135deg, #b08d3e 0%, #8a5a2b 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 100%);

    --gradient-mesh:
        radial-gradient(at 15% 15%, rgba(176, 141, 62, 0.1) 0, transparent 55%),
        radial-gradient(at 85% 10%, rgba(31, 58, 95, 0.08) 0, transparent 50%),
        radial-gradient(at 50% 85%, rgba(138, 90, 43, 0.07) 0, transparent 60%);

    /* Typography */
    --font-family: 'Lora', Georgia, 'Times New Roman', serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.75rem;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra: 800;

    --line-height: 1.65;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 80px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* Soft Editorial Shadows & Glows */
    --shadow-sm: 0 1px 3px rgba(28, 37, 48, 0.08), 0 1px 2px rgba(28, 37, 48, 0.06);
    --shadow-md: 0 8px 24px -6px rgba(28, 37, 48, 0.16);
    --shadow-lg: 0 20px 45px -12px rgba(28, 37, 48, 0.22);
    --shadow-blue: 0 10px 30px -6px rgba(176, 141, 62, 0.35);
    --shadow-glow: 0 0 0 1px rgba(176, 141, 62, 0.08);

    /* Smooth Transitions */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout & Sizing */
    --container-width: 1200px;
    --header-height: 72px;

    /* Z-Index Hierarchy */
    --z-loader: 9999;
    --z-modal: 999;
    --z-header: 100;
    --z-dropdown: 50;
}

/* ==========================================
   DARK MODE OVERRIDES (Deep Navy)
========================================== */
html.dark {
    --background: #0f1626;
    --background-light: #141c2f;
    --background-card: rgba(23, 33, 54, 0.85);

    --card: rgba(23, 33, 54, 0.85);
    --card-solid: #172136;
    --card-hover: rgba(30, 43, 68, 0.9);

    --text: #f1ecdf;
    --text-light: #b9b2a2;
    --text-muted: #8a8475;

    --border: rgba(241, 236, 223, 0.1);
    --border-hover: rgba(176, 141, 62, 0.55);

    --glass: rgba(15, 22, 38, 0.9);
    --glass-border: rgba(241, 236, 223, 0.08);

    --gradient-text: linear-gradient(135deg, #f1ecdf 0%, #d4af5a 55%, #8a5a2b 100%);

    --gradient-mesh:
        radial-gradient(at 15% 15%, rgba(176, 141, 62, 0.08) 0, transparent 55%),
        radial-gradient(at 85% 10%, rgba(31, 58, 95, 0.35) 0, transparent 50%),
        radial-gradient(at 50% 85%, rgba(138, 90, 43, 0.1) 0, transparent 60%);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   GLOBAL SELECTION & BODY
========================================== */
::selection {
    background: rgba(176, 141, 62, 0.25);
    color: var(--text);
}

body {
    font-family: var(--font-family);
    background-color: var(--background);
    background-image: var(--gradient-mesh);
    background-attachment: fixed;
    color: var(--text);
    overflow-x: hidden;
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}