@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root,
.dark {
  color-scheme: dark;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --color-surface-base: #0d1117;
  --color-surface-raised: #131923;
  --color-surface-overlay: #191f2a;
  --color-surface-inset: #070a0f;
  --color-border-subtle: #252d3a;
  --color-border-strong: #3a4556;
  --color-text-primary: #eef2f7;
  --color-text-secondary: #aeb8c7;
  --color-text-mono: #d8e2ef;
  --color-text-muted: #788395;
  --color-focus-ring: #7dd3fc;
  --color-link: #8bd3ff;

  --color-state-decoded: #4fc3b4;
  --color-state-decoded-muted: #3d8f86;
  --color-state-verified: #67d391;
  --color-state-evidenced: #38bfa7;
  --color-state-evidenced-muted: #2f8175;
  --color-state-inferred: #8d8cff;
  --color-state-unverified: #8aa0b8;
  --color-state-unverified-warm: #d39b4f;
  --color-state-perceived: #5ec8f2;
  --color-state-contradicted: #f07178;
  --color-state-ambiguous: #b18cff;
  --color-state-undetermined: #77808f;
  --color-state-scope: #64748b;
  --color-state-bounded: #e59f48;
  --color-state-needed: #f3c45b;

  --color-clearance-cleared: #74d99f;
  --color-clearance-violated: #f25f6f;
  --color-clearance-unassessable: #7f8998;
  --color-clearance-suppressed: #bd5b68;

  --color-review-pending: #e8b94e;
  --color-review-accepted: #57c989;
  --color-review-rejected: #cf6470;
  --color-review-withdrawn: #858d9b;

  --color-grounding-teaching: #61d394;
  --color-grounding-pack: #42c7b5;
  --color-grounding-vault: #7f95ff;
  --color-grounding-partial: #6faea4;
  --color-grounding-oov: #e9a94f;
  --color-grounding-none: #6f7b8c;

  --color-state-info-bg: #10253a;
  --color-state-info-border: #23648e;
  --color-state-info-text: #bde8ff;
  --color-state-success-bg: #10291e;
  --color-state-success-border: #2d7a55;
  --color-state-success-text: #b9f3d3;
  --color-state-warning-bg: #31240c;
  --color-state-warning-border: #9c6a1b;
  --color-state-warning-text: #ffd89a;
  --color-state-danger-bg: #351419;
  --color-state-danger-border: #9f3848;
  --color-state-danger-text: #ffc3ca;
  --color-state-neutral-bg: #1b212c;
  --color-state-neutral-border: #465164;
  --color-state-neutral-text: #d4dbe7;
  --color-state-purple-bg: #241a34;
  --color-state-purple-border: #7655a2;
  --color-state-purple-text: #dec8ff;

  --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;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-1: var(--radius-sm);
  --radius-2: var(--radius-md);
  --radius-3: var(--radius-lg);
  --shadow-panel: 0 10px 35px rgb(0 0 0 / 0.28);
  --shadow-floating: 0 18px 60px rgb(0 0 0 / 0.45);
  --shadow-overlay: var(--shadow-floating);

  --font-size-display: 1.75rem;
  --font-size-h1: 1.375rem;
  --font-size-h2: 1rem;
  --font-size-body: 0.875rem;
  --font-size-meta: 0.75rem;
  --font-size-mono: 0.75rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --text-xs: var(--font-size-meta);
  --text-sm: var(--font-size-body);
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: var(--font-size-h1);
  --line-tight: var(--line-height-tight);
  --line-normal: var(--line-height-base);

  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 1200ms;
  --motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration-instant: var(--motion-instant);
  --motion-duration-fast: var(--motion-fast);
  --motion-duration-standard: var(--motion-base);
  --motion-duration-slow: var(--motion-slow);
  --motion-ease-standard: var(--motion-ease-out);
  --motion-ease-emphasized: var(--motion-ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--motion-duration-instant) !important;
    transition-duration: var(--motion-duration-instant) !important;
    animation-iteration-count: 1 !important;
  }
}
