/**
 * Design Tokens
 * 270 Park Avenue Website
 *
 * A Regal, Conservative "Old Money" Design System
 * Refined for institutional excellence and timeless elegance
 */

:root {
    /* ================================ */
    /* COLORS - Old Money Palette       */
    /* ================================ */

    /* Primary Palette - Timeless Elegance */
    --color-ivory: #F8F6F0;
    --color-cream: #FAF9F5;
    --color-parchment: #F5F2E9;
    --color-linen: #ECE8DE;

    /* Deep Heritage Tones */
    --color-evergreen: #0A2822;
    --color-forest: #0E352D;
    --color-oxford: #0F1C2E;
    --color-midnight: #0B1420;
    --color-navy: #1A2D47;

    /* Accent - Antique Gold */
    --color-antique-gold: #B08D57;
    --color-antique-gold-light: #C9A96A;
    --color-antique-gold-dark: #8B6F45;
    --color-champagne: #E8DCC4;
    --color-bronze: #9B7845;

    /* Neutral Tones */
    --color-ink: #1A2020;
    --color-charcoal: #2D3636;
    --color-slate: #3D4A4A;
    --color-stone: #5A6868;
    --color-silver: #8B9999;
    --color-mist: #C5CACA;
    --color-cloud: #E8EBEB;
    --color-porcelain: #FBFBF9;
    --color-white: #FFFFFF;

    /* Status Colors - Muted & Refined */
    --color-success: #2D6B4F;
    --color-success-light: rgba(45, 107, 79, 0.1);
    --color-error: #9B3B3B;
    --color-error-light: rgba(155, 59, 59, 0.1);
    --color-warning: #9B7845;
    --color-warning-light: rgba(155, 120, 69, 0.1);
    --color-info: #3B6B9B;
    --color-info-light: rgba(59, 107, 155, 0.1);

    /* ================================ */
    /* SEMANTIC COLOR MAPPINGS          */
    /* ================================ */
    --color-bg-primary: var(--color-ivory);
    --color-bg-secondary: var(--color-cream);
    --color-bg-tertiary: var(--color-parchment);
    --color-bg-elevated: var(--color-white);
    --color-bg-muted: var(--color-linen);
    --color-bg-inverse: var(--color-evergreen);

    --color-text-primary: var(--color-ink);
    --color-text-secondary: var(--color-charcoal);
    --color-text-muted: var(--color-stone);
    --color-text-subtle: var(--color-silver);
    --color-text-inverse: var(--color-ivory);
    --color-text-accent: var(--color-antique-gold);

    --color-border-light: var(--color-champagne);
    --color-border-default: var(--color-linen);
    --color-border-strong: var(--color-antique-gold);
    --color-border-subtle: rgba(176, 141, 87, 0.3);

    --color-accent-primary: var(--color-antique-gold);
    --color-accent-secondary: var(--color-evergreen);
    --color-accent-hover: var(--color-antique-gold-dark);

    /* ================================ */
    /* SPACING (8px base unit)          */
    /* ================================ */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;
    --space-section: var(--space-24);
    --space-section-lg: var(--space-32);

    /* ================================ */
    /* TYPOGRAPHY                       */
    /* ================================ */
    --font-display: 'Playfair Display', 'Didot', Georgia, serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', monospace;

    --text-2xs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;

    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.8;
    --leading-prose: 1.75;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-caps: 0.15em;

    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ================================ */
    /* BORDERS & RADIUS                 */
    /* ================================ */
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    --border-width-thin: 1px;
    --border-width-default: 2px;
    --border-width-thick: 4px;
    --border-width-accent: 6px;

    --border-thin: 1px solid var(--color-border-default);
    --border-default: 2px solid var(--color-border-default);
    --border-accent: 4px solid var(--color-accent-primary);
    --border-strong: 6px solid var(--color-accent-primary);
    --border-decorative: 1px solid var(--color-border-subtle);

    /* ================================ */
    /* SHADOWS                          */
    /* ================================ */
    --shadow-xs: 0 1px 2px 0 rgba(26, 32, 32, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(26, 32, 32, 0.05), 0 1px 2px -1px rgba(26, 32, 32, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(26, 32, 32, 0.05), 0 2px 4px -2px rgba(26, 32, 32, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(26, 32, 32, 0.05), 0 4px 6px -4px rgba(26, 32, 32, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 32, 0.05), 0 8px 10px -6px rgba(26, 32, 32, 0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(26, 32, 32, 0.15);
    --shadow-inner: inset 0 2px 4px 0 rgba(26, 32, 32, 0.03);
    --shadow-glow: 0 0 20px rgba(176, 141, 87, 0.15);
    --shadow-card: 0 4px 24px rgba(26, 32, 32, 0.04), 0 1px 2px rgba(26, 32, 32, 0.03);
    --shadow-elevated: 0 8px 32px rgba(26, 32, 32, 0.08), 0 2px 8px rgba(26, 32, 32, 0.04);

    /* ================================ */
    /* TRANSITIONS                      */
    /* ================================ */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    --duration-instant: 75ms;
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-moderate: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    --transition-fast: var(--duration-fast) var(--ease-default);
    --transition-base: var(--duration-base) var(--ease-default);
    --transition-slow: var(--duration-slow) var(--ease-smooth);
    --transition-colors: color var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default);

    /* ================================ */
    /* LAYOUT                           */
    /* ================================ */
    --container-xs: 32rem;
    --container-sm: 40rem;
    --container-md: 48rem;
    --container-lg: 64rem;
    --container-xl: 80rem;
    --container-2xl: 96rem;
    --container-max: 75rem;
    --container-prose: 65ch;

    --container-padding-sm: var(--space-4);
    --container-padding-md: var(--space-6);
    --container-padding-lg: var(--space-8);

    /* ================================ */
    /* Z-INDEX SCALE                    */
    /* ================================ */
    --z-deep: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    --z-maximum: 9999;

    /* ================================ */
    /* ASPECT RATIOS                    */
    /* ================================ */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-photo: 4 / 3;
    --aspect-portrait: 3 / 4;
    --aspect-golden: 1.618 / 1;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-moderate: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
    }
}