/* ==========================================================================
   SPN LEGAL — DESIGN SYSTEM TOKENS
   "Chambers Green" — an Indian legal-chambers aesthetic: ledger lines,
   brass fixtures, deep forest green. Warm, authoritative, human.
   ========================================================================== */

:root {
  /* ---------- COLOR — CORE PALETTE ---------- */
  --ink:            #12291F; /* Chamber Ink — near-black green, dark surfaces */
  --ink-soft:       #1B342A;
  --green-900:      #16352A;
  --green-800:      #1F4738; /* Chamber Green — primary brand */
  --green-700:      #2A5C48;
  --green-600:      #3B715A;
  --moss:           #4C7A63; /* secondary accent / hover */
  --moss-light:     #7FA491;

  --parchment:      #EDE6D6; /* primary warm background */
  --sand:           #DDD1AC; /* deeper beige — section division */
  --sand-line:      #DCD2B8; /* hairline borders on beige */
  --cream:          #FAF8F3; /* main canvas */
  --white:          #FFFFFF;

  --brass:          #A9915B; /* sparing accent — never large fills */
  --brass-light:    #C9B584;

  /* ---------- COLOR — TEXT ---------- */
  --text-primary:      #16261F;
  --text-secondary:    #4A5A51;
  --text-muted:        #75847A;
  --text-on-dark:      #F3EFE2;
  --text-on-dark-soft: #B9C6BC;
  --text-brass:        #8C7645;

  /* ---------- COLOR — BORDERS / SURFACES ---------- */
  --border:            #DCD2BB;
  --border-soft:       #E7E0CE;
  --border-dark:       rgba(243, 239, 226, 0.14);
  --border-dark-soft:  rgba(243, 239, 226, 0.08);
  --surface-card:      #FFFFFF;
  --surface-sunken:    #F3EEE1;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl: clamp(2.75rem, 4.4vw + 1rem, 5.25rem);
  --fs-display-l:  clamp(2.25rem, 3vw + 1rem, 3.75rem);
  --fs-h1:         clamp(2rem, 2.2vw + 1rem, 3rem);
  --fs-h2:         clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
  --fs-h3:         clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  --fs-h4:         1.25rem;
  --fs-body-lg:    1.1875rem;
  --fs-body:       1rem;
  --fs-small:      0.9375rem;
  --fs-xs:         0.8125rem;
  --fs-eyebrow:    0.8125rem;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-eyebrow: 0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  --section-pad-y: clamp(4rem, 7vw, 9rem);
  --section-pad-y-sm: clamp(3rem, 5vw, 5.5rem);
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------- RADIUS ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---------- SHADOW (warm-tinted, never pure black) ---------- */
  --shadow-sm: 0 2px 8px -2px rgba(18, 41, 31, 0.10);
  --shadow-md: 0 12px 28px -12px rgba(18, 41, 31, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(18, 41, 31, 0.30);
  --shadow-card-hover: 0 20px 44px -16px rgba(18, 41, 31, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  /* ---------- LAYOUT CONSTANTS ---------- */
  --header-h: 84px;

  /* ---------- Z-INDEX ---------- */
  --z-header: 100;
  --z-megamenu: 90;
  --z-drawer: 110;
  --z-modal: 120;
}