/* ============================================
   KDM DERMA THERAPY · DESIGN TOKENS
   Crafted by ThatDeveloperGuy.com

   Aesthetic direction: Editorial wellness clinic.
   Multi-cultural beauty grounded in clinical authority.
   Warm earth + sage botanical + champagne gold.
   ============================================ */

:root {
  /* ─────────── COLOR ─────────── */
  /* Primary palette: warm earth, multi-hued tones */
  --clay-50:  #FBF6F0;
  --clay-100: #F4E9DC;
  --clay-200: #E6D0B6;
  --clay-300: #D4B188;
  --clay-400: #C28E5B;
  --clay-500: #A86F40;
  --clay-600: #8A5530;
  --clay-700: #6B4124;
  --clay-800: #4A2D18;
  --clay-900: #2E1B0F;

  /* Sage botanical secondary */
  --sage-50:  #F4F7F2;
  --sage-100: #E4ECDD;
  --sage-200: #C7D6BA;
  --sage-300: #A3B891;
  --sage-400: #7E9569;
  --sage-500: #5F7A49;
  --sage-600: #4A6238;
  --sage-700: #3A4C2C;
  --sage-800: #2A3720;
  --sage-900: #1B2415;

  /* Champagne gold accent */
  --gold-50:  #FBF6E8;
  --gold-100: #F5EAC4;
  --gold-200: #ECD58A;
  --gold-300: #DEBE5B;
  --gold-400: #C9A338;
  --gold-500: #A6852A;
  --gold-600: #826822;
  --gold-700: #5F4C19;
  --gold-800: #3D3110;
  --gold-900: #1F1808;

  /* Neutral espresso scale */
  --ink-50:  #FAF7F4;
  --ink-100: #EEE7DE;
  --ink-200: #D6CABB;
  --ink-300: #ADA08D;
  --ink-400: #7F7261;
  --ink-500: #574C3D;
  --ink-600: #3E3528;
  --ink-700: #2A2218;
  --ink-800: #1A140E;
  --ink-900: #0E0A06;

  /* Semantic assignments */
  --color-bg:           var(--clay-50);
  --color-bg-alt:       var(--clay-100);
  --color-bg-deep:      var(--ink-800);
  --color-surface:      #FFFFFF;
  --color-ink:          var(--ink-800);
  --color-ink-muted:    var(--ink-500);
  --color-ink-soft:     var(--ink-400);
  --color-line:         rgba(46, 27, 15, 0.08);
  --color-line-strong:  rgba(46, 27, 15, 0.18);

  --color-primary:      var(--clay-700);
  --color-primary-hover:var(--clay-800);
  --color-secondary:    var(--sage-600);
  --color-accent:       var(--gold-400);
  --color-accent-deep:  var(--gold-600);

  --color-on-primary:   var(--clay-50);
  --color-on-accent:    var(--ink-800);
  --color-on-deep:      var(--clay-100);

  /* ─────────── TYPOGRAPHY ─────────── */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Apple Garamond', Garamond, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Modular type scale (1.250 major third on mobile, 1.333 on desktop) */
  --type-xs:    0.75rem;     /* 12px */
  --type-sm:    0.875rem;    /* 14px */
  --type-base:  1rem;        /* 16px */
  --type-md:    1.125rem;    /* 18px */
  --type-lg:    1.333rem;    /* 21.3px */
  --type-xl:    1.777rem;    /* 28.4px */
  --type-2xl:   2.369rem;    /* 37.9px */
  --type-3xl:   3.157rem;    /* 50.5px */
  --type-4xl:   4.209rem;    /* 67.3px */
  --type-5xl:   5.610rem;    /* 89.7px */
  --type-6xl:   7.478rem;    /* 119.6px */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.15;
  --leading-normal: 1.45;
  --leading-relaxed:1.65;
  --leading-loose:  1.85;

  /* Letter spacing */
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─────────── SPACING ─────────── */
  /* Fluid spacing scale */
  --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-2xs: clamp(0.5rem,  0.4rem + 0.5vw,  0.75rem);
  --space-xs:  clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
  --space-sm:  clamp(1rem,    0.8rem + 1vw,    1.5rem);
  --space-md:  clamp(1.5rem,  1.2rem + 1.5vw,  2.25rem);
  --space-lg:  clamp(2rem,    1.6rem + 2vw,    3rem);
  --space-xl:  clamp(3rem,    2.4rem + 3vw,    4.5rem);
  --space-2xl: clamp(4rem,    3.2rem + 4vw,    6rem);
  --space-3xl: clamp(6rem,    4.8rem + 6vw,    9rem);
  --space-4xl: clamp(8rem,    6.4rem + 8vw,    12rem);

  /* ─────────── LAYOUT ─────────── */
  --container-narrow: 720px;
  --container-text:   980px;
  --container-base:   1240px;
  --container-wide:   1440px;
  --container-bleed:  1680px;

  --gutter:           clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  --section-rhythm:   var(--space-3xl);

  /* ─────────── RADIUS ─────────── */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   36px;
  --radius-pill:  9999px;

  /* ─────────── SHADOWS ─────────── */
  --shadow-xs:  0 1px 2px rgba(46, 27, 15, 0.06);
  --shadow-sm:  0 2px 4px rgba(46, 27, 15, 0.06), 0 1px 2px rgba(46, 27, 15, 0.04);
  --shadow-md:  0 8px 16px rgba(46, 27, 15, 0.08), 0 2px 4px rgba(46, 27, 15, 0.04);
  --shadow-lg:  0 20px 40px rgba(46, 27, 15, 0.12), 0 8px 16px rgba(46, 27, 15, 0.06);
  --shadow-xl:  0 32px 64px rgba(46, 27, 15, 0.18), 0 16px 32px rgba(46, 27, 15, 0.08);
  --shadow-glow:0 0 60px rgba(201, 163, 56, 0.35);
  --shadow-inset:inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(46, 27, 15, 0.08);

  /* ─────────── MOTION ─────────── */
  --ease-out-quad:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quart:  cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-organic:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  350ms;
  --duration-slow:    600ms;
  --duration-luxe:    1000ms;
  --duration-cinema:  1800ms;

  /* ─────────── Z-INDEX ─────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-cursor:  9999;

  /* ─────────── GRAIN & TEXTURE ─────────── */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-luxe: 0ms;
    --duration-cinema: 0ms;
  }
}