/**
 * Sheen Overseas - Design System Variables & Tokens
 * Brand Color System: Black + White base, Warm Off-White sections, Signature Red primary
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* --- Brand Color System --- */
    --color-black: #040D1C;
    --color-black-deep: #040D1C;
    --color-black-charcoal: #040D1C;
    --color-black-surface: #040D1C;
    --color-dark-navy: #040D1C;
    
    --color-white: #D6D1C0;
    --color-white-off: #D6D1C0;
    --color-warm-gray-1: #CBC5B2; /* Natural travertine & warm limestone */
    --color-warm-gray-2: #BFB8A2;
    
    --color-gray-dark: #040D1C;
    --color-gray-body: #040D1C;
    --color-gray-muted: #040D1C;
    --color-gray-border: #C7C1AD;
    --color-gray-border-dark: #2E2E36;

    /* Signature Brand Red */
    --color-primary: #5B0D18;
    --color-primary-hover: #42070F;
    --color-primary-light: #821927; /* used on dark backgrounds */
    --color-primary-muted: #38060B;
    --color-primary-subtle: rgba(91, 13, 24, 0.08);

    /* --- Typography Fonts --- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* --- Type Scale --- */
    --text-hero-xl: clamp(2.75rem, 5.5vw, 4.75rem);      /* 44px - 76px */
    --text-hero: clamp(2.25rem, 4.2vw, 3.5rem);          /* 36px - 56px */
    --text-display: clamp(1.85rem, 3.2vw, 2.75rem);      /* 30px - 44px */
    --text-h1: clamp(1.75rem, 2.8vw, 2.35rem);           /* 28px - 38px */
    --text-h2: clamp(1.45rem, 2.2vw, 1.95rem);           /* 23px - 31px */
    --text-h3: clamp(1.2rem, 1.6vw, 1.5rem);             /* 19px - 24px */
    --text-h4: 1.125rem;                                 /* 18px */
    --text-body-lg: 1.0625rem;                           /* 17px */
    --text-body: 0.9375rem;                              /* 15px */
    --text-body-sm: 0.84375rem;                          /* 13.5px */
    --text-label: 0.6875rem;                             /* 11px */

    /* --- Spacing Scale --- */
    --space-2: 0.125rem;  /* 2px */
    --space-4: 0.25rem;   /* 4px */
    --space-8: 0.5rem;    /* 8px */
    --space-12: 0.75rem;  /* 12px */
    --space-16: 1rem;     /* 16px */
    --space-20: 1.25rem;  /* 20px */
    --space-24: 1.5rem;   /* 24px */
    --space-28: 1.75rem;  /* 28px */
    --space-32: 2rem;     /* 32px */
    --space-36: 2.25rem;  /* 36px */
    --space-40: 2.5rem;   /* 40px */
    --space-48: 3rem;     /* 48px */
    --space-64: 3.75rem;  /* 60px */
    --space-80: 4.5rem;   /* 72px */
    --space-96: 5.5rem;   /* 88px */
    --space-120: 6.5rem;  /* 104px */
    --space-160: 8rem;    /* 128px */

    /* --- Layout & Containers --- */
    --container-max: 1320px;
    --container-narrow: 800px;
    --header-height: 76px;
    --header-height-mobile: 64px;
    --hero-height-desktop: 680px;
    --hero-height-mobile: 520px;

    /* --- Shadows & Elevation --- */
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 20px 50px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 20px rgba(91, 13, 24, 0.3);

    /* --- Transitions --- */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Borders --- */
    --radius-none: 0px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 9999px;
}