/* ============================================================
   drsujeeth.com  ·  Design System  ·  Tokens
   Extracted from Hernia-Page-V2 prototype, 2026-05-14
   Single source of truth for colour, type, space, motion, layout.
   Do not hardcode these values anywhere — always reference the var.
   ============================================================ */

:root {

  /* ---------- INK / TEXT (Lovable emerald palette) ---------- */
  --ink:        #052016;   /* near-black emerald — headings, strong text */
  --ink-2:      #0a2e22;   /* slightly lighter emerald — secondary headings, nav */
  --ink-soft:   #3e564b;   /* muted emerald-grey — body copy */
  --muted:      #5d6b5e;   /* warm grey-green — meta, captions, labels */

  /* ---------- INK / TEXT (Lovable palette) ---------- */
  /* (--ink, --ink-2, --ink-soft above also updated to Lovable values) */

  /* ---------- SURFACE / BG (Lovable warm cream) ---------- */
  --bg:         #fcfaf4;   /* warm cream page surface */
  --bg-soft:    #efebdd;   /* cream-tan alt section */
  --bg-warm:    #f5f0e2;   /* editorial warm section */
  --bg-tint:    #dde5e0;   /* very pale emerald tint */
  --line:       #dbd8c9;   /* primary tan divider */
  --line-2:     #e5e2d4;   /* softer tan divider */
  --card:       #fefdfa;   /* near-white card */

  /* ---------- BRAND (Lovable deep emerald) ---------- */
  --brand:      #003e2a;   /* deep emerald — primary CTA, links */
  --brand-700:  #052016;   /* near-black emerald, hover/depth */
  --brand-300:  #1f634a;   /* mid emerald */
  --brand-100:  #b5c7bd;   /* pale emerald outline */
  --brand-50:   #dde5e0;   /* very pale emerald bg, hover */

  /* ---------- ACCENT (Lovable warm gold) ---------- */
  --accent:     #dab155;   /* warm gold */
  --accent-700: #b58f3d;   /* darker gold, hover */
  --accent-50:  #f4e9c9;   /* pale gold bg */

  /* ---------- SEMANTIC ---------- */
  --gold:       #dab155;   /* stars, premium ribbon (same as accent) */
  --warn-50:    #f7e9b8;
  --success:    #1f634a;
  --danger:     #b54a35;   /* warm clay-red, fits palette */

  /* ---------- ELEVATION (shadows tinted to emerald ink) ---------- */
  --shadow-xs:    0 1px 2px rgba(5,32,22,.06);
  --shadow-sm:    0 2px 6px rgba(5,32,22,.06), 0 1px 2px rgba(5,32,22,.04);
  --shadow-md:    0 8px 28px rgba(5,32,22,.08), 0 2px 8px rgba(5,32,22,.04);
  --shadow-lg:    0 24px 60px rgba(5,32,22,.10), 0 8px 16px rgba(5,32,22,.06);
  --shadow-brand: 0 12px 32px rgba(0,62,42,.18);

  /* ---------- RADIUS ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- SPACING SCALE (new — not in prototype) ----------
     Use these for any new padding/margin so we stay consistent.
     Prototype-derived: section padding 80px, hero 72/80, card 28px. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;   /* canonical section padding */
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- TYPE SCALE (new — abstracted from prototype clamps) ---------- */
  --fs-h1: clamp(34px, 4.6vw, 58px);
  --fs-h2: clamp(26px, 3.0vw, 38px);
  --fs-h3: 18px;
  --fs-lede: 18.5px;
  --fs-body: 17px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-kicker: 12px;

  --lh-tight: 1.05;
  --lh-snug:  1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.018em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-kicker: 0.14em;

  /* ---------- FONT STACKS (Lovable: IBM Plex Sans + Libre Baskerville) ---------- */
  --font-sans:       'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:      'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-vernacular: 'Noto Sans Telugu', 'Noto Sans Devanagari', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;

  /* ---------- LAYOUT ---------- */
  --maxw: 1180px;          /* canonical container */
  --maxw-narrow: 720px;    /* article/body-text container */
  --maxw-wide: 1280px;     /* gallery, grid section */

  --bp-sm:  580px;
  --bp-md:  720px;
  --bp-lg:  920px;
  --bp-xl:  1180px;

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  .2s;
  --dur-mid:   .3s;
  --dur-slow:  .8s;

  /* ---------- Z-INDEX ---------- */
  --z-base:    0;
  --z-fixed:   50;   /* sticky header */
  --z-sticky:  60;   /* mobile sticky CTA */
  --z-overlay: 100;  /* scroll progress */
  --z-grain:   200;  /* paper grain texture */
  --z-modal:   1000;

  /* ---------- BACKDROP ---------- */
  --blur-sm: blur(6px);
  --blur-md: blur(12px);
  --blur-lg: blur(14px);
}

/* ============================================================
   DARK MODE — reserved for future. Do NOT enable yet.
   Dr. Sujeeth has indicated background + contrast should stay
   as-is (light, premium medical). Keep this block commented.
   ============================================================
@media (prefers-color-scheme: dark) {
  :root { ... }
}
============================================================ */