/**
 * Design Tokens
 * Premium Editorial Design System
 * Inspired by Christy Dawn - warm earth tones, generous spacing
 *
 * Units strategy:
 * - rem: spacing, typography, sizing (respects user preferences)
 * - px: borders, shadows, hairlines (1-2px)
 * - clamp(): fluid responsive values
 */

:root {
    /* ============================================
     * COLORS - Warm Earth Tones
     * ============================================ */

    /* Primary - Black */
    --primary: #000;
    --on-primary: #fff;
    --primary-container: #f5f5f5;
    --on-primary-container: #1a1a1a;
    --primary-hover: #333;

    /* Surface - White */
    --surface: #fff;
    --surface-dim: #f5f0eb;
    --surface-bright: #fff;
    --surface-container-lowest: #fff;
    --surface-container-low: #faf7f4;
    --surface-container: #f5f3f0;
    --surface-container-high: #ebe6e2;
    --surface-container-highest: #e5e0db;
    --surface-variant: #f5f3f0;
    --surface-footer: #f9f7f3;

    /* On Surface - Black Text */
    --on-surface: #000;
    --on-surface-variant: #444;

    /* Outline - Neutral Grays */
    --outline: #888;
    --outline-variant: #ddd;

    /* Error */
    --error: #b3261e;
    --on-error: #fff;
    --error-container: #f9dedc;
    --on-error-container: #410e0b;

    /* Success */
    --success: #2e7d32;
    --on-success: #fff;

    /* ============================================
     * ELEVATION (px for shadows)
     * ============================================ */
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
    --elevation-3: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);

    /* ============================================
     * SHAPE (px for small radii, rem for large)
     * ============================================ */
    --radius-xs: 4px;
    --radius-sm: 0.5rem;    /* 8px */
    --radius-md: 0.75rem;   /* 12px */
    --radius-lg: 1rem;      /* 16px */
    --radius-xl: 1.75rem;   /* 28px */
    --radius-full: 9999px;

    /* ============================================
     * TYPOGRAPHY - Premium Editorial
     * ============================================ */

    /*
     * Type Scale - Minor Third (1.2)
     * Each step ~20% larger than previous
     * All values in rem for accessibility
     */
    --text-2xs: 0.625rem;   /* 10px - captions, fine print */
    --text-xs: 0.75rem;     /* 12px - labels, badges */
    --text-sm: 0.875rem;    /* 14px - secondary text */
    --text-base: 1rem;      /* 16px - body text */
    --text-lg: 1.125rem;    /* 18px - lead text */
    --text-xl: 1.25rem;     /* 20px - h5 */
    --text-2xl: 1.5rem;     /* 24px - h4 */
    --text-3xl: 1.875rem;   /* 30px - h3 */
    --text-4xl: 2.25rem;    /* 36px - h2 */
    --text-5xl: 2.625rem;   /* 42px - h1 */
    --text-6xl: 3rem;       /* 48px - display */

    /*
     * Fluid Typography - Premium Editorial Scale
     * Larger sizes for editorial impact
     * Formula: clamp(min, preferred, max)
     */
    --text-fluid-sm: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem);       /* 15-16px */
    --text-fluid-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);     /* 17-19px */
    --text-fluid-lg: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);        /* 19-24px */
    --text-fluid-xl: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);           /* 22-32px */
    --text-fluid-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);       /* 28-42px */
    --text-fluid-3xl: clamp(2.125rem, 1.7rem + 2vw, 3.25rem);         /* 34-52px */
    --text-fluid-display: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);       /* 44-72px */

    /* Font Families - Serif headings, Sans body */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-nav: var(--font-sans);  /* Sans for navigation clarity */
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ============================================
     * SPACING (rem for scalability)
     * ============================================ */
    --space-0: 0;
    --space-1: 0.25rem;     /* 4px */
    --space-2: 0.5rem;      /* 8px */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-8: 2rem;        /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* Section Spacing - Generous Editorial (80-100px+) */
    --space-section-sm: clamp(3rem, 2.5rem + 2vw, 4rem);        /* 48-64px */
    --space-section: clamp(4rem, 3rem + 4vw, 6rem);             /* 64-96px */
    --space-section-lg: clamp(5rem, 4rem + 5vw, 8rem);          /* 80-128px */

    /* ============================================
     * LAYOUT & CONTAINERS - Premium Editorial
     * ============================================ */

    /* Container max-widths - Wider for editorial breathing room */
    --container-max: 87.5rem;    /* 1400px - main content (was 1200px) */
    --container-narrow: 56.25rem; /* 900px - forms (was 800px) */
    --container-text: 50rem;     /* 800px - readable text (was 700px) */
    --container-wide: 100rem;    /* 1600px - wide layouts (was 1400px) */

    /* Gutters (container padding) - More generous */
    --gutter: var(--space-4);           /* 16px default */
    --gutter-sm: var(--space-3);        /* 12px mobile */
    --gutter-lg: var(--space-8);        /* 32px desktop (was 24px) */

    /* Fluid gutter: 20px @ 320px → 48px @ 1400px (more generous) */
    --gutter-fluid: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
    --gutter-wide: clamp(2rem, 1rem + 4vw, 4rem);  /* 32-64px for editorial */

    /* Fixed layout values */
    --top-bar-height: 34px;
    --header-height: 4rem;      /* 64px */
    --drawer-width: 22.5rem;    /* 360px */

    /* ============================================
     * TRANSITIONS
     * ============================================ */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* ============================================
     * Z-INDEX SCALE
     * ============================================ */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-drawer: 201;
    --z-modal: 300;
    --z-toast: 400;

    /* ============================================
     * BORDERS (px for hairlines)
     * ============================================ */
    --border-width: 1px;
    --border-width-2: 2px;
}

/* Dark mode (future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override tokens here when needed */
    }
}