/*==================================================
  VARIABLES.CSS
  Zen Spa Home
  Design System v2.0
==================================================*/

:root {

    /*==============================================
      COLORS
    ==============================================*/

    --color-primary: #B9915D;
    --color-primary-light: #D2B48C;
    --color-primary-dark: #8C6A3F;

    --color-secondary: #1C1C1C;
    --color-background: #F8F7F4;
    --color-surface: #FFFFFF;

    --color-text: #2E2E2E;
    --color-text-light: #6F6F6F;
    --color-text-muted: #9C9C9C;

    --color-border: #E6E2DB;
    --color-overlay: rgba(0, 0, 0, 0.45);

    --color-success: #3AA76D;
    --color-warning: #D9A441;
    --color-error: #D64B4B;

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

    --font-family-base: "Manrope", sans-serif;
    --font-family-heading: "Manrope", sans-serif;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 2rem;       /* 32px */
    --font-size-3xl: 3rem;       /* 48px */
    --font-size-4xl: 4rem;       /* 64px */
    --font-size-5xl: clamp(4rem, 8vw, 6.5rem);

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

    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-body: 1.7;

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

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

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

    --container-width: 1320px;
    --container-padding: 24px;

    --section-padding: 120px;
    --section-padding-mobile: 80px;

    /*==============================================
      BORDER RADIUS
    ==============================================*/

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --radius-full: 9999px;

    /*==============================================
      SHADOWS
    ==============================================*/

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);

    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);

    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);

    /*==============================================
      TRANSITIONS
    ==============================================*/

    --transition-fast: 0.25s ease;
    --transition-base: 0.4s ease;
    --transition-slow: 0.7s ease;

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

    --z-loader: 9999;
    --z-navbar: 900;
    --z-overlay: 100;
    --z-dropdown: 950;
    --z-modal: 990;
    --z-cursor: 999;
    --z-fixed: 800;

}