/* ==========================================================================
   Lumina Dermatology — Design Tokens
   Editorial luxury clinic system. Warm, calm, restrained.
   ========================================================================== */

:root {
  /* ---- Color: Canvas & Surface (Zinc & Verdigris) ---- */
  --color-canvas: #F3F2EE;          /* zinc white — page background */
  --color-surface: #FFFFFF;         /* elevated card surface */
  --color-surface-sunken: #EBE9E2;  /* deeper zinc — alternate section bg */
  --color-surface-ink: #22241E;     /* cool charcoal inverted sections */
  --color-surface-ink-2: #2B2E26;   /* inverted surface, slightly lighter */

  /* ---- Color: Ink / Text ---- */
  --color-ink: #24261F;             /* primary text — cool near-black */
  --color-ink-soft: #5C5F54;        /* secondary text */
  --color-ink-faint: #8B8D80;       /* tertiary / meta text */
  --color-ink-invert: #F3F2EE;      /* text on ink surfaces */
  --color-ink-invert-soft: #C7C8BC; /* secondary text on ink surfaces */

  /* ---- Color: Brand ---- */
  --color-clay: #5E7A6B;            /* primary accent (oxidized copper/verdigris) — CTA, links, focus */
  --color-clay-dark: #4A6357;       /* hover/pressed */
  --color-clay-light: #E3E9E5;      /* tints, badges */
  --color-sage: #B4693F;            /* secondary accent (warm clay) — category labels, icon bg */
  --color-sage-light: #F3E4D8;
  --color-gold: #A69073;            /* hairline luxury accent, sparingly */

  /* ---- Color: Border / Divider ---- */
  --color-border: #DAD7CC;
  --color-border-strong: #C7C3B5;
  --color-border-invert: rgba(243, 242, 238, 0.16);

  /* ---- Color: Semantic ---- */
  --color-success: #4B6B4F;
  --color-error: #A23B2E;
  --color-focus: #5E7A6B;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.8125rem;                          /* 13px */
  --fs-small: 0.9375rem;                            /* 15px */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);      /* 16-18px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);   /* 18-22px */
  --fs-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);      /* 22-28px */
  --fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);         /* 28-40px */
  --fs-h1: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);         /* 36-56px */
  --fs-display: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);    /* 44-88px */

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.16em;

  /* ---- Spacing (8pt base) ---- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --content-max: 1200px;
  --gutter: clamp(1.5rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  /* ---- Shadow (soft, layered, warm-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(34, 30, 26, 0.05);
  --shadow-sm: 0 2px 8px rgba(34, 30, 26, 0.06), 0 1px 2px rgba(34, 30, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(34, 30, 26, 0.08), 0 2px 6px rgba(34, 30, 26, 0.05);
  --shadow-lg: 0 24px 64px rgba(34, 30, 26, 0.12), 0 8px 20px rgba(34, 30, 26, 0.06);
  --shadow-xl: 0 40px 96px rgba(34, 30, 26, 0.16), 0 12px 32px rgba(34, 30, 26, 0.08);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
  --dur-cinematic: 900ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
  }
}