/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: editorial · design-system: DESIGN.md · runtime-owner: FastingOS */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

:root {
  --color-paper: oklch(98.42% 0.0034 247.86);
  --color-paper-2: oklch(96.83% 0.0069 247.9);
  --color-surface: oklch(99% 0.002 247.9);
  --color-surface-2: oklch(94.5% 0.009 247.9);
  --color-ink: oklch(20.77% 0.0398 265.75);
  --color-ink-2: oklch(37.17% 0.0392 257.29);
  --color-muted: oklch(44.55% 0.0374 257.28);
  --color-rule: oklch(88% 0.012 247.9);
  --color-rule-2: oklch(76% 0.018 247.9);
  --color-accent: oklch(57.71% 0.2152 27.33);
  --color-accent-strong: oklch(50.54% 0.1905 27.52);
  --color-accent-wash: oklch(97.05% 0.0129 17.38);
  --color-accent-ink: oklch(99% 0.002 247.9);
  --color-focus: oklch(50.54% 0.1905 27.52);
  --color-warning: oklch(76.86% 0.1647 70.08);
  --color-success: oklch(62.71% 0.1699 149.21);
  --color-info: oklch(62.31% 0.188 259.81);
  --color-error: oklch(57.71% 0.2152 27.33);
  --color-inverse-muted: oklch(82% 0.018 247.9);
  --color-inverse-rule: oklch(38% 0.025 257.29);
  --color-accent-soft: oklch(84% 0.12 70.08);

  --font-display: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  --font-outlier: ui-monospace, "SFMono-Regular", monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-read: 18px;
  --text-md: 20px;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  --text-4xl: 3.8147rem;
  --text-display-s: clamp(2.5rem, 4vw + 0.5rem, 4.25rem);
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --rule-hairline: 1px solid var(--color-rule);
  --rule-strong: 1px solid var(--color-rule-2);
  --focus-offset: 0.25rem;
  --radius-control: 0.75rem;
  --radius-field: 1rem;
  --radius-panel: 1.5rem;
  --radius-feature: 1.75rem;
  --shadow-whisper: 0 1px 2px oklch(20.77% 0.0398 265.75 / 0.05);
  --shadow-panel: 0 1.25rem 3.75rem oklch(20.77% 0.0398 265.75 / 0.08);

  --page-max: 70rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --reading-measure: 65ch;

  /* App-parity layer. Ported from frontend/DESIGN.md so the public estate reads as
     the same product as the React app. Additive: the older --color-* tokens above are
     still consumed by the landing page and the calculator plugin until their phases. */
  --color-canvas: #FAF9F7;
  --color-canvas-soft: #F5F3F0;
  --color-card: #FFFFFF;
  --color-app-ink: #1E293B;
  --color-app-ink-strong: #0F172A;
  --color-app-ink-soft: #475569;
  --color-app-muted: #64748B;
  --color-app-faint: #94A3B8;
  --color-app-line: #E2E8F0;
  --color-app-line-soft: #F1F5F9;
  --color-app-red: #EF4444;
  --color-app-red-strong: #DC2626;
  --color-app-red-wash: #FEF2F2;
  --color-app-blue: #3B82F6;
  --color-app-green: #22C55E;
  --color-app-amber: #F59E0B;

  --gradient-cta: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --gradient-ink: linear-gradient(160deg, #2E4A5C 0%, #243B4A 100%);

  --shadow-card: 0 1px 2px rgba(36, 59, 74, 0.04), 0 8px 24px -8px rgba(36, 59, 74, 0.10);
  --shadow-card-lg: 0 2px 4px rgba(36, 59, 74, 0.04), 0 16px 40px -12px rgba(36, 59, 74, 0.14);
  --shadow-cta: 0 8px 20px -6px rgba(239, 68, 68, 0.40);

  --radius-card: 1.5rem;
  --radius-pill: 9999px;

  --ease-app-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-app-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-app-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-popover: 200ms;
  --dur-sheet: 260ms;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}