/* ============================================================
   TOKENS.CSS — Med 44 Arcadia Design System
   Design tokens derived from luxury medical aesthetic
   reference sites (Éclat, Klinik, Serelin, Epidermis, etc.)
   ============================================================ */

:root {

  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --bg-base:          #F5F0EA;   /* Main canvas — warm ivory cream      */
  --bg-surface:       #EDE8E1;   /* Cards, inputs, alternating sections  */
  --bg-deep:          #E0D9CF;   /* Footer accent, heavy dividers        */
  --bg-dark:          #14120F;   /* Hero overlay, dark CTA sections      */
  --bg-dark-card:     #1E1C18;   /* Cards on dark surfaces               */

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --text-primary:     #1A1814;   /* Main headings & body                 */
  --text-secondary:   #534F49;   /* Sub-headings, body descriptions      */
  --text-muted:       #9B968F;   /* Captions, tags, placeholders         */
  --text-on-dark:     #F0EBE3;   /* Text on dark bg                      */
  --text-on-dark-dim: rgba(240, 235, 227, 0.65);

  /* ── BRAND ACCENTS ───────────────────────────────────────── */
  --accent-primary:   #8B7355;   /* Warm mocha — primary action colour   */
  --accent-light:     #C4A882;   /* Hover, decorative hairlines          */
  --accent-gold:      #C8A86A;   /* Premium — use sparingly              */
  --accent-sage:      #7E9A78;   /* Medical credibility / "healthy" feel */

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border-subtle:    rgba(26, 24, 20, 0.09);
  --border-medium:    rgba(26, 24, 20, 0.18);
  --border-dark:      rgba(240, 235, 227, 0.12);

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-soft:      0 2px 16px rgba(26, 24, 20, 0.05);
  --shadow-card:      0 8px 40px  rgba(26, 24, 20, 0.10);
  --shadow-card-hover:0 20px 60px rgba(26, 24, 20, 0.15);
  --shadow-nav:       0 1px 0     rgba(26, 24, 20, 0.08);

  /* ── FONT FAMILIES ───────────────────────────────────────── */
  --font-heading:  'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ── FONT WEIGHTS ────────────────────────────────────────── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* ── TYPOGRAPHIC MEASURE (Line length control: 45–75 chars) ─ */
  --measure:        65ch;   /* Optimal reading line length */
  --measure-narrow: 48ch;   /* Hero subtitles & card text  */
  --measure-wide:   72ch;   /* Feature narrative text      */

  /* ── TYPE SCALE (fluid clamp) ────────────────────────────── */
  --text-xs:    clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem); /* 12–13px  */
  --text-sm:    clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14–15px  */
  --text-base:  clamp(1rem,     0.97rem + 0.15vw, 1.0625rem); /* 16–17px  */
  --text-md:    clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);   /* 18–20px  */
  --text-lg:    clamp(1.25rem,  1.18rem + 0.4vw,  1.5rem);    /* 20–24px  */
  --text-xl:    clamp(1.5rem,   1.38rem + 0.6vw,  1.875rem);  /* 24–30px  */
  --text-2xl:   clamp(1.875rem, 1.7rem  + 0.9vw,  2.375rem);  /* 30–38px  */
  --text-3xl:   clamp(2.375rem, 2.1rem  + 1.5vw,  3.25rem);   /* 38–52px  */
  --text-4xl:   clamp(2.875rem, 2.5rem  + 2.2vw,  4.25rem);   /* 46–68px  */
  --text-hero:  clamp(3.5rem,   3.0rem  + 3.2vw,  5.75rem);   /* 56–92px  */

  /* ── LINE HEIGHTS ────────────────────────────────────────── */
  --leading-none:    0.98;   /* Display hero titles      */
  --leading-tight:   1.06;   /* Major section titles     */
  --leading-snug:    1.20;   /* Cards & H3/H4 titles     */
  --leading-normal:  1.42;   /* UI elements & labels     */
  --leading-relaxed: 1.62;   /* Body paragraphs (comfort)*/
  --leading-loose:   1.85;   /* Extended reading         */

  /* ── LETTER SPACING ──────────────────────────────────────── */
  --tracking-tight:   -0.022em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.16em;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-text:   700px;
  --container-narrow: 540px;

  /* ── SECTION PADDING (vertical) ─────────────────────────── */
  --section-py-sm:   clamp(3rem,   6vw,   5rem);
  --section-py-md:   clamp(5rem,   8vw,   8rem);
  --section-py-lg:   clamp(7rem,  11vw,  10rem);

  /* ── SPACING SCALE ───────────────────────────────────────── */
  --space-2:   0.125rem;   /* 2px  */
  --space-4:   0.25rem;    /* 4px  */
  --space-8:   0.5rem;     /* 8px  */
  --space-12:  0.75rem;    /* 12px */
  --space-16:  1rem;       /* 16px */
  --space-20:  1.25rem;    /* 20px */
  --space-24:  1.5rem;     /* 24px */
  --space-32:  2rem;       /* 32px */
  --space-40:  2.5rem;     /* 40px */
  --space-48:  3rem;       /* 48px */
  --space-64:  4rem;       /* 64px */
  --space-80:  5rem;       /* 80px */
  --space-96:  6rem;       /* 96px */
  --space-128: 8rem;       /* 128px */

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-out-cubic:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    180ms;
  --duration-base:    280ms;
  --duration-slow:    420ms;
  --duration-slower:  700ms;

  /* ── GRID ────────────────────────────────────────────────── */
  --grid-gap:  clamp(0.75rem, 1.5vw, 1.25rem);

  /* ── NAV ─────────────────────────────────────────────────── */
  --nav-height: 80px;
}

@media (max-width: 767px) {
  :root {
    --text-hero: clamp(2.35rem, 1.8rem + 3.2vw, 3.5rem);
    --text-4xl:  clamp(1.95rem, 1.5rem + 2.5vw, 2.75rem);
    --text-3xl:  clamp(1.65rem, 1.35rem + 2vw, 2.15rem);
    --text-2xl:  clamp(1.35rem, 1.15rem + 1.2vw, 1.75rem);
    --nav-height: 72px;
  }
}