/* ==========================================================================
   AURELIA AESTHETIC MEDICINE — DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM (Luxury Natural Neutrals, Warm Stone & Bronze)
     ------------------------------------------------------------------------ */
  --bg-primary: #F7F4EF;          /* Warm ivory / soft cream */
  --bg-secondary: #EEEAE4;        /* Soft limestone */
  --bg-surface: #FCFBF8;          /* Pure elevated section cream */
  --bg-surface-elevated: #FFFFFF; /* Pure white card surface */
  --bg-dark: #242321;             /* Deep warm charcoal */
  --bg-dark-surface: #2E2C29;     /* Elevated dark stone */
  --bg-dark-card: #35332F;        /* Dark card surface */

  --text-primary: #292724;        /* Deep warm charcoal */
  --text-secondary: #706B65;      /* Muted taupe-gray */
  --text-tertiary: #969089;       /* Subtle utility gray */
  --text-on-dark: #F7F4EF;        /* Light ivory text for dark surfaces */
  --text-muted-dark: #B8B3AB;     /* Muted taupe for dark backgrounds */

  /* Accents */
  --accent-bronze: #B49A78;       /* Muted champagne bronze */
  --accent-bronze-dark: #967E5E;  /* Deeper bronze for hover / contrast */
  --accent-bronze-light: #DFCFC0; /* Very pale bronze tint */
  --accent-blush: #E7D4CF;        /* Soft blush accent */
  --accent-sage: #AAB6A6;         /* Muted botanical sage */
  --accent-sage-pale: #E8EDE6;    /* Very pale calming sage */

  /* Borders & Dividers */
  --border-subtle: rgba(50, 45, 40, 0.11);
  --border-light: rgba(50, 45, 40, 0.06);
  --border-dark: rgba(247, 244, 239, 0.12);
  --border-focus: #B49A78;

  /* Shadows (Subtle, diffused, soft) */
  --shadow-sm: 0 2px 8px rgba(41, 39, 36, 0.03);
  --shadow-md: 0 8px 24px rgba(41, 39, 36, 0.05);
  --shadow-lg: 0 16px 40px rgba(41, 39, 36, 0.07);
  --shadow-hover: 0 20px 48px rgba(41, 39, 36, 0.09);
  --shadow-dark: 0 12px 36px rgba(0, 0, 0, 0.25);

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Responsive Typography with clamp() */
  --text-display: clamp(3rem, 6vw + 1rem, 5.5rem);       /* 48px to 88px */
  --text-h1: clamp(2.4rem, 4.5vw + 0.5rem, 4rem);        /* 38px to 64px */
  --text-h2: clamp(2rem, 3.2vw + 0.5rem, 3rem);          /* 32px to 48px */
  --text-h3: clamp(1.5rem, 2vw + 0.4rem, 2.25rem);       /* 24px to 36px */
  --text-h4: clamp(1.2rem, 1.4vw + 0.3rem, 1.625rem);    /* 19px to 26px */
  --text-body-lg: 1.125rem;                               /* 18px */
  --text-body: 1rem;                                      /* 16px */
  --text-body-sm: 0.875rem;                               /* 14px */
  --text-caption: 0.75rem;                                /* 12px */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.18em;

  /* ------------------------------------------------------------------------
     3. LAYOUT & SPACING
     ------------------------------------------------------------------------ */
  --container-max: 1340px;
  --container-narrow: 980px;
  --container-editorial: 820px;

  /* Fluid Section Spacing (Desktop: 110-150px, Mobile: 60-80px) */
  --section-pad-y: clamp(4.5rem, 7vw + 1rem, 8.5rem);
  --section-pad-sm: clamp(3rem, 4.5vw + 0.5rem, 5.5rem);

  /* Container Gutters */
  --gutter: clamp(1.25rem, 3.5vw, 3.5rem);

  /* Radii (Gentle, restrained, 10-16px, never huge blobs) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------------
     4. TRANSITIONS & TIMING
     ------------------------------------------------------------------------ */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 220ms;
  --duration-normal: 380ms;
  --duration-slow: 650ms;

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-drawer: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-concierge: 400;
}