/*
 * Design tokens for the Law Office of Brian Burkett — sourced verbatim from
 * .planning/research/DESIGN.md §13. Any deviation requires a written
 * rationale in a phase plan (per DESIGN.md §0).
 */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color primitives ---------- */
  --ink-900: #0B1F3A;
  --ink-800: #12294A;
  --ink-700: #1E3A8A;
  --ink-500: #334155;
  --ink-400: #475569;
  --ink-300: #94A3B8;
  --gold-700: #8B5A0F;
  --gold-600: #B45309;
  --gold-500: #D97706;
  --gold-100: #FEF3C7;
  --cream-50: #FBF8F3;
  --cream-100: #F5EFE4;
  --paper-0:  #FFFFFF;
  --edge-200: #E8DFD0;
  --edge-300: #D6C9B3;
  --red-700:  #B91C1C;
  --red-100:  #FEE2E2;
  --green-700: #15803D;
  --green-100: #DCFCE7;

  /* ---------- Semantic colors ---------- */
  --color-bg: var(--cream-50);
  --color-bg-elev-1: var(--cream-100);
  --color-bg-elev-2: var(--paper-0);
  --color-surface-dark: var(--ink-800);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-text-subtle: var(--ink-400);
  --color-text-on-dark: var(--cream-50);
  --color-accent: var(--gold-600);
  --color-accent-hover: var(--gold-500);
  --color-accent-text: var(--gold-700);
  --color-border: var(--edge-200);
  --color-border-strong: var(--edge-300);
  --color-focus-ring: var(--gold-500);
  --color-error: var(--red-700);
  --color-error-bg: var(--red-100);
  --color-success: var(--green-700);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 4vw + 1rem, 4rem);
  --fs-h1:      clamp(2rem, 3vw + 0.75rem, 3rem);
  --fs-h2:      clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1vw + 0.75rem, 1.625rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --lh-loose:   1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.1em;

  /* ---------- Spacing (4pt) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Radius ---------- */
  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-sm: 0 2px 4px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.08), 0 1px 3px rgba(11, 31, 58, 0.06);
  --shadow-lg: 0 12px 24px rgba(11, 31, 58, 0.10), 0 4px 8px rgba(11, 31, 58, 0.06);
  --shadow-xl: 0 24px 48px rgba(11, 31, 58, 0.12), 0 8px 16px rgba(11, 31, 58, 0.08);
  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.5);
  --shadow-inset: inset 0 1px 2px rgba(11, 31, 58, 0.06);

  /* ---------- Motion ---------- */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1440px;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-dropdown: 10;
  --z-sticky:  20;
  --z-header:  30;
  --z-drawer:  40;
  --z-overlay: 50;
  --z-modal:   60;
  --z-toast:   70;
}