/**
 * See Dermatology — Elevated brand track (design tokens)
 *
 * Breakpoints (reference for media queries in consuming stylesheets):
 * - Mobile:  0 – 767px
 * - Tablet:  768px – 1023px
 * - Desktop: 1024px+
 * - Wide:    1440px+
 */

:root {
  /* -------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------- */
  --bg-primary: #fdfaf7;
  --bg-secondary: #f0ebe3;
  --bg-dark: #2c2420;
  --text-primary: #2c2420;
  --text-secondary: #7a6f64;
  --text-on-dark: #f0ebe3;
  --accent-clinical: #5b8a8b;
  --accent-warm: #d4b896;
  --accent-rose: #c4908f;
  --accent-gold: #b09872;
  --white: #ffffff;

  /* -------------------------------------------------------------------------
     Typography — font families
     ------------------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;

  /* -------------------------------------------------------------------------
     Typography — type scale (fluid)
     ------------------------------------------------------------------------- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
  --text-lg: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);
  --text-hero: clamp(3rem, 1.5rem + 6vw, 5.5rem);

  /* -------------------------------------------------------------------------
     Typography — line height
     ------------------------------------------------------------------------- */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* -------------------------------------------------------------------------
     Typography — font weight
     ------------------------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* -------------------------------------------------------------------------
     Typography — letter spacing
     ------------------------------------------------------------------------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* -------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* -------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------- */
  --max-width: 1280px;
  --max-width-narrow: 960px;
  --max-width-text: 680px;
  --grid-columns: 12;
  --grid-gap: var(--space-6);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-slower: 600ms ease;

  /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(44, 36, 32, 0.04);
  --shadow-md: 0 2px 8px rgba(44, 36, 32, 0.06);
  --shadow-lg: 0 4px 16px rgba(44, 36, 32, 0.08);

  /* -------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------- */
  --border-hairline: 1px solid rgba(212, 184, 150, 0.2);
  --border-subtle: 1px solid rgba(212, 184, 150, 0.35);
}