/* ============================================
   STYRA DESIGNS - DESIGN TOKENS
   Centralized variables for consistent theming
   ============================================ */

:root {
    /* ---------- Colors ---------- */
    --color-primary: #1A1A1A;
    --color-secondary: #F7F5F2;
    --color-accent: #C8A96A;
    --color-accent-dark: #B8955A;
    --color-accent-light: #D9C08A;
    --color-white: #FFFFFF;
    --color-text: #2D2D2D;
    --color-text-light: #6B6B6B;
    --color-border: #E6E6E6;
    --color-border-dark: #D1D1D1;
    --color-overlay: rgba(26, 26, 26, 0.6);
    --color-overlay-dark: rgba(26, 26, 26, 0.85);
    --color-overlay-light: rgba(26, 26, 26, 0.35);
    --color-success: #4CAF50;
    --color-error: #F44336;
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #128C7E;
    --color-call: #4CAF50;

    /* ---------- Typography ---------- */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    --font-number: 'Montserrat', sans-serif;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 2rem;      /* 32px */
    --font-size-3xl: 2.5rem;    /* 40px */
    --font-size-4xl: 3rem;      /* 48px */
    --font-size-5xl: 3.5rem;    /* 56px */
    --font-size-6xl: 4rem;      /* 64px */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* ---------- Spacing ---------- */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 0.75rem;   /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 5rem;     /* 80px */
    --spacing-5xl: 6rem;     /* 96px */
    --spacing-6xl: 8rem;     /* 128px */

    /* ---------- Layout ---------- */
    --container-max: 1440px;
    --container-wide: 1920px;
    --container-narrow: 960px;
    --container-padding: 2rem;
    --container-padding-mobile: 1.25rem;

    --header-height: 80px;
    --header-height-scrolled: 64px;

    /* ---------- Border Radius ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.08);
    --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.12);
    --shadow-lg: 0 8px 32px rgba(26, 26, 26, 0.16);
    --shadow-xl: 0 16px 48px rgba(26, 26, 26, 0.2);
    --shadow-accent: 0 4px 20px rgba(200, 169, 106, 0.3);
    --shadow-accent-lg: 0 8px 32px rgba(200, 169, 106, 0.4);

    /* ---------- Transitions ---------- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ---------- Z-Index Scale ---------- */
    --z-back: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    --z-preloader: 9999;

    /* ---------- Grid ---------- */
    --grid-gap: 2rem;
    --grid-gap-sm: 1rem;
    --grid-gap-lg: 3rem;

    /* ---------- Glassmorphism ---------- */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(20px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* ---------- Gradients ---------- */
    --gradient-hero: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.4) 50%, rgba(26, 26, 26, 0.7) 100%);
    --gradient-accent: linear-gradient(135deg, #C8A96A 0%, #D9C08A 50%, #C8A96A 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    --gradient-light: linear-gradient(135deg, #F7F5F2 0%, #FFFFFF 100%);

    /* ---------- Textures ---------- */
    --texture-noise: url('../images/textures/noise.png');
    --texture-grain: url('../images/textures/grain.png');
    --texture-paper: url('../images/textures/paper.png');

    /* ---------- Breakpoints ---------- */
    --bp-1920: 1920px;
    --bp-1600: 1600px;
    --bp-1440: 1440px;
    --bp-1366: 1366px;
    --bp-1280: 1280px;
    --bp-1200: 1200px;
    --bp-1024: 1024px;
    --bp-992: 992px;
    --bp-820: 820px;
    --bp-768: 768px;
    --bp-576: 576px;
    --bp-480: 480px;
    --bp-390: 390px;
    --bp-375: 375px;
    --bp-360: 360px;
    --bp-320: 320px;
}