/* LegalAtoms design tokens — "Harbor" palette.
   Source of truth: LegalAtoms Design System handoff (claude.ai/design).
   Custom properties only — safe to load site-wide. */

:root {
	/* ---- Primary: Indigo Navy ---- */
	--la-navy-50: #F0F4FA;
	--la-navy-100: #DEE7F5;
	--la-navy-200: #BCCDE9;
	--la-navy-300: #93ACD8;
	--la-navy-400: #6585BE;
	--la-navy-500: #44649E;
	--la-navy-600: #324E82;
	--la-navy-700: #283E68;
	--la-navy-800: #20304F;
	--la-navy-900: #1A2540;
	--la-navy-950: #0F1629;

	/* ---- Accent: Ember Coral (deliberately ORANGE, never red — red belongs
	        to status/safety. Brand moments only; never feedback UI.) ---- */
	--la-coral-50: #FDF4EE;
	--la-coral-100: #FAE5D7;
	--la-coral-200: #F5C9AD;
	--la-coral-300: #EEA37D;
	--la-coral-400: #E67E50;
	--la-coral-500: #DC6330;
	--la-coral-600: #BF4E1F;
	--la-coral-700: #9C3F1B;
	--la-coral-800: #7C3319;
	--la-coral-900: #652B18;

	/* ---- Neutrals: Slate (logo mark = slate-700) ---- */
	--la-white: #FFFFFF;
	--la-slate-50: #F7F9FA;
	--la-slate-100: #EFF2F4;
	--la-slate-200: #E1E7EA;
	--la-slate-300: #CBD5DA;
	--la-slate-400: #9FAEB7;
	--la-slate-500: #768893;
	--la-slate-600: #5A6C78;
	--la-slate-700: #475A66;
	--la-slate-800: #33424C;
	--la-slate-900: #222E36;
	--la-ink: #131C24;

	/* ---- Semantic status ---- */
	--la-success: #177A4F;
	--la-success-bg: #E8F5EE;
	--la-warning: #9A6700;
	--la-warning-bg: #FBF2DC;
	--la-error: #9F1239; /* deep rose — cooler than Safety Exit red, never confusable */
	--la-error-bg: #FBEAEF;
	--la-info: var(--la-navy-600);
	--la-info-bg: var(--la-navy-50);

	/* ---- Safety Exit (must read instantly on every surface) ---- */
	--la-safety: #C0392B;
	--la-safety-hover: #A53125;
	--la-safety-fg: #FFFFFF;

	/* ---- Semantic aliases ---- */
	--text-heading: var(--la-navy-900);
	--text-body: var(--la-slate-800);
	--text-secondary: var(--la-slate-600);
	--text-muted: var(--la-slate-500);
	--text-on-dark: #FFFFFF;
	--text-on-dark-dim: rgba(255, 255, 255, 0.72);
	--text-link: var(--la-navy-600);
	--text-accent: var(--la-coral-600);

	--surface-page: #FFFFFF;
	--surface-subtle: var(--la-slate-50);
	--surface-tint: var(--la-navy-50);
	--surface-card: #FFFFFF;
	--surface-dark: var(--la-navy-950);
	--surface-overlay: rgba(19, 28, 36, 0.55);

	--border-default: var(--la-slate-200);
	--border-strong: var(--la-slate-300);
	--border-on-dark: rgba(255, 255, 255, 0.16);

	--focus-ring: 0 0 0 3px rgba(68, 100, 158, 0.35);

	/* ---- Gradients: washes and decorative accents, never button fills
	        (except --gradient-cta / --gradient-cta-warm on the page's #1 CTA),
	        never behind body text. Petitioner pages: --gradient-calm only. ---- */
	--gradient-hero: radial-gradient(56rem 30rem at 12% -10%, rgba(68, 100, 158, 0.20), transparent 60%), radial-gradient(44rem 26rem at 92% -6%, rgba(220, 99, 48, 0.14), transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
	--gradient-wash: linear-gradient(180deg, #F3F6FB 0%, #FFFFFF 85%);
	--gradient-enterprise: radial-gradient(50rem 26rem at 88% -10%, rgba(220, 99, 48, 0.10), transparent 55%), linear-gradient(165deg, #DEE7F5 0%, #EEF3FA 42%, #FFFFFF 100%);
	--gradient-calm: linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 70%);
	--gradient-band: radial-gradient(48rem 24rem at 85% 0%, rgba(220, 99, 48, 0.20), transparent 55%), linear-gradient(165deg, #20304F 0%, #0F1629 78%);
	--gradient-brand: linear-gradient(120deg, #324E82 0%, #6585BE 42%, #DC6330 100%);
	--gradient-cta: linear-gradient(105deg, #20304F 0%, #324E82 45%, #BF4E1F 100%);
	--gradient-cta-warm: linear-gradient(105deg, #8A3A0F 0%, #A64B12 45%, #BA5916 100%);
	--gradient-text: linear-gradient(92deg, #324E82 0%, #BF4E1F 100%);
	--gradient-rule: linear-gradient(90deg, transparent, rgba(68, 100, 158, 0.4), rgba(220, 99, 48, 0.4), transparent);

	/* ---- Typography ----
	   GFS Didot: TITLE font — display sizes, h1–h3, stat numerals, wordmark,
	   pull-quotes. Google Fonts ships Regular (400) only (no bold, no italic),
	   so every display token is weight 400 — hierarchy comes from size, not
	   weight, and synthetic bold (which smears a Didone's hairlines) is avoided.
	   Public Sans: BODY font — body copy, UI, buttons, h4, eyebrows.
	   IBM Plex Mono: case numbers, form codes (WPF DV 1.015) — sparingly. */
	--font-display: "GFS Didot", Georgia, "Times New Roman", serif;
	--font-sans: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
	--font-serif: "GFS Didot", Georgia, "Times New Roman", serif;
	--font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

	--text-display-xl: 400 clamp(2.75rem, 5.5vw, 4.25rem) / 1.04 var(--font-display);
	--text-display: 400 clamp(2.25rem, 4vw, 3.25rem) / 1.08 var(--font-display);
	--tracking-display: -0.01em;

	--text-h1: 400 2.5rem / 1.15 var(--font-display);
	--text-h2: 400 2rem / 1.2 var(--font-display);
	--text-h3: 400 1.5rem / 1.3 var(--font-display);
	--text-h4: 600 1.25rem / 1.4 var(--font-sans);
	--tracking-heading: -0.01em;

	--text-body-lg: 400 1.125rem / 1.65 var(--font-sans);
	--text-body: 400 1rem / 1.6 var(--font-sans);
	--text-body-sm: 400 0.875rem / 1.55 var(--font-sans);
	--text-caption: 500 0.75rem / 1.5 var(--font-sans);

	/* Plain language (petitioner surfaces; 6th-grade reading level) */
	--text-plain-lg: 400 1.375rem / 1.65 var(--font-sans);
	--text-plain: 400 1.25rem / 1.7 var(--font-sans);

	--text-quote: 400 1.5rem / 1.5 var(--font-serif);
	--text-stat: 400 3rem / 1.05 var(--font-display);
	--text-eyebrow: 700 0.8125rem / 1.3 var(--font-sans);
	--tracking-eyebrow: 0.1em;
	--text-mono-sm: 500 0.8125rem / 1.5 var(--font-mono);

	/* ---- Spacing (4px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--section-pad-y: clamp(64px, 9vw, 128px);
	--section-pad-y-calm: clamp(56px, 8vw, 96px);
	--content-max: 1140px;
	--content-narrow: 720px;

	/* ---- Radii ---- */
	--radius-sm: 6px;
	--radius-md: 10px; /* buttons, inputs */
	--radius-lg: 16px; /* cards */
	--radius-xl: 24px; /* framed screenshots, hero media */
	--radius-pill: 999px;

	/* ---- Shadows (slate-tinted, soft) ---- */
	--shadow-sm: 0 1px 2px rgba(34, 46, 54, 0.06), 0 1px 3px rgba(34, 46, 54, 0.08);
	--shadow-md: 0 2px 4px rgba(34, 46, 54, 0.05), 0 8px 24px rgba(34, 46, 54, 0.09);
	--shadow-lg: 0 4px 8px rgba(34, 46, 54, 0.05), 0 24px 56px rgba(34, 46, 54, 0.13);
	--shadow-frame: 0 0 0 1px rgba(34, 46, 54, 0.07), 0 2px 4px rgba(34, 46, 54, 0.04), 0 28px 64px rgba(32, 48, 79, 0.16);
	--shadow-focus: var(--focus-ring);

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
	.la-page *,
	.la-page *::before,
	.la-page *::after,
	.la-prose *,
	.la-safety-exit {
		animation: none !important;
		transition: none !important;
	}
}