/* ========================================
   RoseRoom Salon - CSS Variables
   Design tokens for colors, typography, and spacing
   ======================================== */

:root {
  /* ----------------------------------------
     COLORS
     ---------------------------------------- */
  --color-gold: #bf8c42;
  --color-gold-hover: #d4a04d;
  --color-gold-dark: #a67a3a;

  --color-dark: #2e2e2e;
  --color-dark-rgb: 46, 46, 46;

  --color-light-bg: #eee7dd;
  --color-white: #ffffff;
  --color-off-white: #f9f7f4;

  --color-text: #2e2e2e;
  --color-text-light: #666666;
  --color-text-on-dark: #ffffff;

  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.7);

  /* ----------------------------------------
     TYPOGRAPHY
     ---------------------------------------- */
  /* Font Families */
  --font-heading: 'Canela', Georgia, 'Times New Roman', serif;
  --font-heading-thin: 'Canela', Georgia, 'Times New Roman', serif;
  --font-body: 'Cooper Hewitt', 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body-medium: 'Cooper Hewitt', 'Raleway', 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes */
  --text-base: 15px;
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */

  --text-h1: 2.5rem;     /* 40px */
  --text-h2: 2rem;       /* 32px */
  --text-h3: 1.5rem;     /* 24px */
  --text-h4: 1.25rem;    /* 20px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Letter Spacing */
  --letter-spacing-body: 0.035em;
  --letter-spacing-nav: 0.1em;
  --letter-spacing-heading: 0.02em;
  --letter-spacing-button: 0.15em;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ----------------------------------------
     SPACING
     ---------------------------------------- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* Section Padding */
  --section-padding-y: 5rem;
  --section-padding-x: 1.5rem;

  /* Container */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;

  /* ----------------------------------------
     BORDERS & RADIUS
     ---------------------------------------- */
  --border-radius-sm: 2px;
  --border-radius-md: 3px;
  --border-radius-lg: 6px;
  --border-radius-full: 50%;

  --border-width: 2px;

  /* ----------------------------------------
     SHADOWS
     ---------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ----------------------------------------
     Z-INDEX SCALE
     ---------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;

  /* ----------------------------------------
     HEADER
     ---------------------------------------- */
  --header-height: 80px;
  --header-height-scrolled: 70px;
}