/**
 * Cienega Design Tokens
 *
 * Centralized CSS custom properties for consistent styling.
 * Created: Jan 2026 (Phase 12: CSS Modernization)
 *
 * Usage: var(--token-name) or var(--token-name, fallback)
 */

:root {
    /* ===========================================
     * COLORS - Brand
     * =========================================== */
    --c-navy: #204363;           /* Primary brand - WCAG AAA 10.3:1 */
    --c-navy-dark: #0c0033;      /* Dark navy for emphasis */
    --c-navy-light: #4a7c9b;     /* Lighter navy for hover states */
    --c-gold: #f9c23c;           /* Accent gold */

    /* ===========================================
     * COLORS - Text
     * =========================================== */
    --c-text: #1f2937;           /* Primary text (Tailwind gray-800) */
    --c-text-muted: #6b7280;     /* Secondary text (Tailwind gray-500) */
    --c-text-light: #9ca3af;     /* Tertiary text (Tailwind gray-400) */
    --c-heading: #374151;        /* Headings (Tailwind gray-700) */

    /* ===========================================
     * COLORS - Background
     * =========================================== */
    --c-bg: #f9fafb;             /* Page background (Tailwind gray-50) */
    --c-bg-alt: #f3f4f6;         /* Alternate sections (Tailwind gray-100) */
    --c-bg-card: #ffffff;        /* Card backgrounds */
    --c-white: #ffffff;

    /* ===========================================
     * COLORS - Borders & Dividers
     * =========================================== */
    --c-border: #e5e7eb;         /* Default borders (Tailwind gray-200) */
    --c-border-light: #f3f4f6;   /* Light borders (Tailwind gray-100) */
    --c-divider: #d1d5db;        /* Divider lines (Tailwind gray-300) */

    /* ===========================================
     * COLORS - UI States
     * =========================================== */
    --c-success: #10b981;        /* Success green */
    --c-error: #ef4444;          /* Error red */
    --c-warning: #f59e0b;        /* Warning amber */
    --c-info: #3b82f6;           /* Info blue */
    --c-link: #007fff;           /* Link blue */

    /* ===========================================
     * TYPOGRAPHY - Font Families
     * =========================================== */
    --font-sans: 'Open Sans', sans-serif;
    --font-serif: 'Cormorant Garamond', georgia, serif;

    /* ===========================================
     * TYPOGRAPHY - Font Sizes (Fluid)
     * Uses clamp(min, preferred, max) for smooth scaling
     * =========================================== */
    --text-xs: clamp(0.75rem, 1.2vw, 0.875rem);    /* 12-14px */
    --text-sm: clamp(0.875rem, 1.5vw, 1rem);       /* 14-16px */
    --text-base: clamp(1rem, 2vw, 1.125rem);       /* 16-18px */
    --text-lg: clamp(1.125rem, 2.5vw, 1.25rem);    /* 18-20px */
    --text-xl: clamp(1.25rem, 3vw, 1.5rem);        /* 20-24px */
    --text-2xl: clamp(1.5rem, 4vw, 2rem);          /* 24-32px */
    --text-3xl: clamp(2rem, 5vw, 3rem);            /* 32-48px */
    --text-4xl: clamp(2.5rem, 6vw, 3.5rem);        /* 40-56px */

    /* ===========================================
     * SPACING - Consistent scale
     * =========================================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* ===========================================
     * SHADOWS
     * =========================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* ===========================================
     * BORDERS
     * =========================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===========================================
     * TRANSITIONS
     * =========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ===========================================
     * Z-INDEX Scale
     * =========================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

/* ===========================================
 * DARK MODE (future-proofing)
 * Uncomment when ready to support
 * =========================================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #1f2937;
        --c-bg-alt: #374151;
        --c-bg-card: #111827;
        --c-text: #f9fafb;
        --c-text-muted: #d1d5db;
        --c-border: #4b5563;
    }
}
*/