/* ============================================================
   JuristAI — Design tokens (colors, type, spacing, motion)
   Adapted from /design/colors_and_type.css for production use.
   ============================================================ */

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Core neutrals: warm parchment & ink ─────────────────── */
  --parchment-50:  #FBF8F2;
  --parchment-100: #F5EFE3;
  --parchment-200: #ECE3CF;
  --parchment-300: #DCCFB1;
  --ink-900:       #1A1410;
  --ink-700:       #3B2F26;
  --ink-500:       #6B5A4B;
  --ink-300:       #9C8C7B;

  /* ── Brand: navy primary, supported by brass & burgundy ──── */
  --navy-900:      #0E2236;
  --navy-700:      #16365A;
  --navy-600:      #1E4878;
  --navy-500:      #2C5C92;
  --navy-300:      #7AA0C6;
  --navy-100:      #E1ECF6;

  --winter-100:    #E8ECEF;
  --winter-200:    #CBD3D9;
  --winter-400:    #8C9AA5;
  --winter-600:    #4F5C66;
  --winter-800:    #2A333B;

  --brass-500:     #B08442;
  --brass-600:     #8E6730;
  --brass-300:     #D6B379;
  --brass-100:     #F2E5C9;

  --burgundy-700:  #6B1F2A;
  --burgundy-500:  #8E2A38;
  --burgundy-100:  #F5E1E3;

  --plum-700:      #4A1F8C;
  --plum-500:      #6E3CC9;
  --gold-500:      #C99A3D;

  /* ── Semantic (warm-tuned) ───────────────────────────────── */
  --success-700:   #2F6B43;
  --success-100:   #DCEFE1;
  --warning-700:   #8A5A0E;
  --warning-100:   #FBEFD0;
  --danger-700:    #8E2A2A;
  --danger-100:    #F4DCDC;
  --info-700:      #2C4A6B;
  --info-100:      #DCE6F0;

  /* ── Dark mode (warm) ────────────────────────────────────── */
  --dark-bg-1:     #18120D;
  --dark-bg-2:     #221A12;
  --dark-bg-3:     #2C2218;
  --dark-border:   #3A2D1F;
  --dark-fg-1:     #F5EFE3;
  --dark-fg-2:     #C8B89C;
  --dark-fg-3:     #8A7A63;
  --dark-accent:   #D6B379;

  /* ── Semantic foreground/background tokens ───────────────── */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-300);
  --bg-1: var(--parchment-50);
  --bg-2: #FFFFFF;
  --bg-3: var(--parchment-100);
  --border-1: var(--parchment-300);
  --border-2: var(--parchment-200);
  --accent: var(--navy-700);
  --accent-hover: var(--navy-600);
  --accent-fg: #FFFFFF;
  --link: var(--navy-700);

  /* ── Type families ───────────────────────────────────────── */
  --font-serif:   "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-print:   "Roboto", system-ui, sans-serif;

  /* ── Type scale (modular, 1.200) ─────────────────────────── */
  --t-display: 56px;
  --t-h1:      40px;
  --t-h2:      30px;
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.65;
  --lh-loose:  1.8;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-cap:    0.12em;

  /* ── Spacing scale (4px base) ────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(26, 20, 16, 0.06), 0 1px 1px rgba(26, 20, 16, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 20, 16, 0.08), 0 1px 2px rgba(26, 20, 16, 0.04);
  --shadow-3: 0 10px 30px rgba(26, 20, 16, 0.12), 0 2px 6px rgba(26, 20, 16, 0.06);
  --shadow-seal: 0 0 0 1px var(--brass-300), 0 8px 24px rgba(176, 132, 66, 0.18);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 360ms;
}

[data-theme="dark"] {
  --fg-1: var(--dark-fg-1);
  --fg-2: var(--dark-fg-2);
  --fg-3: var(--dark-fg-3);
  --fg-4: var(--dark-fg-3);
  --bg-1: var(--dark-bg-1);
  --bg-2: var(--dark-bg-2);
  --bg-3: var(--dark-bg-3);
  --border-1: var(--dark-border);
  --border-2: var(--dark-border);
  --accent: var(--brass-300);
  --accent-hover: var(--brass-500);
  --accent-fg: var(--ink-900);
  --link: var(--brass-300);
}

/* ============================================================
   Semantic type styles
   ============================================================ */
.type-display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.type-h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.type-h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.type-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--navy-700);
}
.type-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.type-body-serif {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.type-small {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-3);
}
.type-micro {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
}
.type-mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0;
}
.type-citation {
  font-family: var(--font-serif);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-500);
}