/* Sterling & Vega, P.C. — Design Tokens
   Palette: FOREST & CLAY — deep forest green, warm terracotta, sage, cream, parchment.
   Type: Inter everywhere — modern sans with display-weight headlines.
   Feel: Grounded, boutique, editorial. Law-library leather without the stock navy+gold. */

/* Fonts are loaded via <link> in HTML for parallel fetch (see preconnect + stylesheet tags). */

:root {
  /* ── Color Palette (var names kept stable — values are Forest & Clay) ── */
  --navy:        #1F3A2E;       /* Forest — primary dark, nav brand, headings */
  --navy-deep:   #142821;       /* Deep forest — dark sections, footer */
  --navy-soft:   #2D5A45;       /* Medium forest — hover, borders */
  --saffron:     #C76D4A;       /* Terracotta — primary CTA + accent (variable name kept for style.css compat) */
  --saffron-lt:  #D98563;       /* Light terracotta — hover */
  --blue-dark:   #A85935;       /* Burnt terracotta — primary CTA hover (variable name kept) */
  --leaf:        #6A8A7A;       /* Sage deep — secondary accent */
  --leaf-lt:     #E6ECE4;       /* Sage whisper — soft tint bg */
  --ivory:       #FAF6EE;       /* Parchment — primary page bg */
  --cream:       #EFE7D8;       /* Cream — alt section bg */
  --cream-alt:   #E4DAC8;       /* Cream warm — secondary alt */
  --white:       #FFFFFF;       /* White — cards, contrast */
  --stone:       #6E6358;       /* Warm stone — secondary text */
  --slate:       #2B2421;       /* Espresso — body text */
  --line:        rgba(31, 58, 46, 0.09);
  --line-strong: rgba(31, 58, 46, 0.18);
  --overlay:     rgba(20, 40, 33, 0.55);

  /* Status / feedback */
  --error-bg:    #F8E0D6;   /* warm terracotta tint */
  --error-text:  #7A2D0F;   /* deep burnt sienna */

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mark:    'Cormorant Garamond', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;

  --text-hero:    clamp(2.5rem, 5.5vw, 4rem);
  --text-display: clamp(2rem, 3.8vw, 3rem);
  --text-heading: clamp(1.4rem, 2.4vw, 2rem);
  --text-sub:     clamp(1.05rem, 1.3vw, 1.2rem);
  --text-body:    clamp(0.95rem, 1vw, 1.05rem);
  --text-small:   clamp(0.82rem, 0.9vw, 0.9rem);
  --text-micro:   clamp(0.7rem, 0.75vw, 0.78rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ── Spacing ──────────────────────────────────────────────────────── */
  --space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:  clamp(1rem, 1.5vw, 1.25rem);
  --space-md:  clamp(1.75rem, 3.5vw, 2.5rem);
  --space-lg:  clamp(3rem, 6vw, 5rem);
  --space-xl:  clamp(5rem, 10vw, 8rem);
  --space-2xl: clamp(7rem, 14vw, 12rem);

  --section-py: clamp(4rem, 8vw, 5rem);

  /* ── Layout ───────────────────────────────────────────────────────── */
  --content-max:   1200px;
  --content-wide:  1360px;
  --content-narrow: 860px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 24px;

  /* ── Shadow (warm, tuned for forest + terracotta) ──────────────────── */
  --shadow-sm:   0 2px 8px rgba(31, 58, 46, 0.07);
  --shadow-md:   0 4px 14px rgba(31, 58, 46, 0.10);
  --shadow-lg:   0 10px 28px rgba(31, 58, 46, 0.14);
  --shadow-xl:   0 18px 48px rgba(31, 58, 46, 0.18);
  --shadow-blue: 0 4px 12px rgba(199, 109, 74, 0.28);  /* terracotta glow (name kept for style.css compat) */

  /* ── Motion (boundless easing) ─────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-io:   cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast:   200ms;
  --dur-med:    300ms;
  --dur-slow:   600ms;
  --dur-reveal: 800ms;

  /* ── Layers ───────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  40;
  --z-nav:     60;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   120;
}
