/* variables.css — Single source of truth for all design tokens */

:root {
    /* ── Brand / Primary ── */
    --primary-gold: #daa520;
    --primary: #daa520;
    --primary-dark: #a18e3d;
    --primary-light: #e2d186;
    --light-gold: #fff9e6;

    /* ── Semantic Colors ── */
    --success: #27ae60;
    --success-light: #d4edda;
    --warning: #f1c40f;
    --warning-light: #fff3cd;
    --danger: #e74c3c;
    --danger-light: #f8d7da;
    --info: #3498db;
    --info-light: #d1ecf1;

    /* ── Text ── */
    --text-main: #333;
    --text-dark: #1e293b;
    --text-muted: #636e72;
    --text-light: #94a3b8;

    /* ── Backgrounds ── */
    --white: #ffffff;
    --bg-page: #f4f7f6;
    --bg-container: rgba(255, 255, 255, 0.2);
    --bg-container-solid: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.03);
    --bg-active: rgba(0, 0, 0, 0.06);

    /* ── Borders & Surfaces ── */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-focus: var(--primary-gold);
    --container-blur: blur(10px);
    --container-border: 1px solid rgba(255, 255, 255, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);

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

    /* ── Border Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ── Typography ── */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;

    /* ── Transitions ── */
    --transition: 0.2s ease;
    --transition-fast: 0.15s ease;
}