/* ============================================================
   STERLING & BLACK ATTORNEYS — DESIGN TOKENS
   ============================================================ */

:root {
  /* ---- Color: Core ---- */
  --color-navy: #0F172A;
  --color-navy-soft: #16213a;
  --color-charcoal: #1F2937;
  --color-white: #FFFFFF;
  --color-warm-gray: #F3F4F6;
  --color-slate: #6B7280;
  --color-slate-light: #9CA3AF;
  --color-line: #E5E7EB;

  /* ---- Color: Gold ---- */
  --color-gold: #C9A227;
  --color-gold-deep: #A67C00;
  --color-gold-soft: rgba(201, 162, 39, 0.14);

  /* ---- Color: Signal ---- */
  --color-success: #15803D;
  --color-warning: #D97706;
  --color-error: #B91C1C;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  --font-body: 'Inter', 'Source Sans 3', -apple-system, sans-serif;

  --fs-caption: 0.875rem;    /* 14px */
  --fs-small: 1rem;          /* 16px */
  --fs-base: 1.125rem;       /* 18px */
  --fs-lead: 1.3125rem;      /* 21px */
  --fs-h5: 1.625rem;         /* 26px */
  --fs-h4: 2.125rem;         /* 34px */
  --fs-h3: 2.625rem;         /* 42px */
  --fs-h2: 3.375rem;         /* 54px */
  --fs-h1: 4.5rem;           /* 72px */
  --fs-display: 5.5rem;      /* 88px */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --ls-eyebrow: 0.16em;
  --ls-tight: -0.01em;

  /* ---- Spacing scale ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* ---- Layout ---- */
  --width-max: 1440px;
  --width-content: 1280px;
  --width-narrow: 860px;
  --width-prose: 720px;

  /* ---- Radius ---- */
  --radius-card: 16px;
  --radius-button: 999px;
  --radius-image: 18px;
  --radius-form: 12px;

  /* ---- Shadow (subtle) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.10);
  --shadow-gold: 0 8px 24px rgba(201, 162, 39, 0.18);

  /* ---- Motion ---- */
  --dur-fast: 300ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 3rem;
    --fs-h1: 2.75rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.5rem;
    --sp-12: 64px;
    --sp-15: 72px;
  }
}