/*
------------------------------------
Platinum Edge Design Tokens
------------------------------------
*/

:root {
    /* =================================
       COLORS
    ================================= */

    --color-primary: #161616;          /* Deep Charcoal */
    --color-primary-soft: #2A2A2A;
    --color-secondary: #E5E2DC;        /* Warm Platinum Gray */
    --color-accent: #B08D57;           /* Platinum Gold */
    --color-accent-hover: #9A7845;

    --color-bg: #F8F7F4;               /* Off-white */
    --color-surface: #FFFFFF;
    --color-surface-alt: #F2F0EB;

    --color-text: #1A1A1A;
    --color-text-muted: #5F6368;
    --color-text-light: #8A8F98;

    --color-border: #D9D6CF;
    --color-border-strong: #BEB8AD;

    --color-success: #0F7B6C;
    --color-warning: #C28A00;
    --color-error: #B42318;

    /* =================================
       TYPOGRAPHY
    ================================= */

    --font-heading: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes */
    --text-display: clamp(4rem, 8vw, 5.25rem);   /* 64–84px */
    --text-hero: clamp(3rem, 6vw, 4rem);         /* 48–64px */
    --text-h1: clamp(2.5rem, 5vw, 3.25rem);      /* 40–52px */
    --text-h2: clamp(2rem, 4vw, 2.5rem);         /* 32–40px */
    --text-h3: clamp(1.5rem, 3vw, 1.875rem);     /* 24–30px */
    --text-body-lg: 1.125rem;                    /* 18px */
    --text-body: 1rem;                           /* 16px */
    --text-small: 0.9375rem;                     /* 15px */
    --text-caption: 0.75rem;                     /* 12px */

    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    /* =================================
       SPACING SYSTEM
    ================================= */

    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
    --space-40: 10rem;    /* 160px */

    /* =================================
       LAYOUT
    ================================= */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1360px;

    --header-height: 88px;

    /* =================================
       BORDERS & RADII
    ================================= */

    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */

    --border-thin: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);

    /* =================================
       SHADOWS (Very Subtle)
    ================================= */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

    /* =================================
       MOTION
    ================================= */

    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 500ms;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* =================================
       Z-INDEX
    ================================= */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* =================================
   BREAKPOINTS (Reference)
   Mobile: 0–767px
   Tablet: 768–1023px
   Desktop: 1024px+
================================= */