/* ============================================================================
   Evalzo tokens — Build with AI concept
   Primitives and semantic aliases are copied from the Evalzo token snapshot
   (design-system/open-design/evalzo-ui/tokens.css, captured 2026-08-18).
   --ezx-* tokens are concept-level extensions and are listed in the handoff.
   Reconcile against src/app/theme.css before implementation.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primitives */
  --ez-color-white: rgb(255 255 255);

  --ez-color-brand-25: rgb(240 253 250);
  --ez-color-brand-50: rgb(240 253 250);
  --ez-color-brand-100: rgb(204 251 241);
  --ez-color-brand-200: rgb(153 246 228);
  --ez-color-brand-300: rgb(94 234 212);
  --ez-color-brand-400: rgb(45 212 191);
  --ez-color-brand-500: rgb(20 184 166);
  --ez-color-brand-600: rgb(13 148 136);
  --ez-color-brand-700: rgb(15 118 110);
  --ez-color-brand-800: rgb(17 94 89);
  --ez-color-brand-900: rgb(19 78 74);
  --ez-color-brand-950: rgb(4 47 46);

  --ez-color-gray-25: rgb(253 253 253);
  --ez-color-gray-50: rgb(250 250 250);
  --ez-color-gray-100: rgb(245 245 245);
  --ez-color-gray-200: rgb(233 234 235);
  --ez-color-gray-300: rgb(213 215 218);
  --ez-color-gray-400: rgb(164 167 174);
  --ez-color-gray-500: rgb(113 118 128);
  --ez-color-gray-600: rgb(83 88 98);
  --ez-color-gray-700: rgb(65 70 81);
  --ez-color-gray-800: rgb(37 43 55);
  --ez-color-gray-900: rgb(24 29 39);
  --ez-color-gray-950: rgb(10 13 18);

  --ez-color-error-50: rgb(254 243 242);
  --ez-color-error-100: rgb(254 228 226);
  --ez-color-error-500: rgb(240 68 56);
  --ez-color-error-600: rgb(217 45 32);
  --ez-color-warning-50: rgb(255 250 235);
  --ez-color-warning-100: rgb(254 240 199);
  --ez-color-warning-500: rgb(247 144 9);
  --ez-color-warning-600: rgb(220 104 3);
  --ez-color-success-50: rgb(236 253 243);
  --ez-color-success-100: rgb(220 250 230);
  --ez-color-success-500: rgb(23 178 106);
  --ez-color-success-600: rgb(7 148 85);

  /* Semantic aliases */
  --text-primary: var(--ez-color-gray-900);
  --text-secondary: var(--ez-color-gray-700);
  --text-tertiary: var(--ez-color-gray-600);
  --text-quaternary: var(--ez-color-gray-500);
  --text-brand: var(--ez-color-brand-900);
  --text-brand-action: var(--ez-color-brand-700);
  --text-error: var(--ezx-color-error-700);
  --text-warning: var(--ezx-color-warning-700);
  --text-success: var(--ezx-color-success-700);

  --border-primary: var(--ez-color-gray-300);
  --border-secondary: var(--ez-color-gray-200);
  --border-brand: var(--ez-color-brand-600);
  --border-error: var(--ez-color-error-500);
  --border-warning: var(--ez-color-warning-500);

  --bg-primary: var(--ez-color-white);
  --bg-secondary: var(--ez-color-gray-50);
  --bg-tertiary: var(--ez-color-gray-100);
  --bg-hover: var(--ez-color-gray-50);
  --bg-active: var(--ez-color-gray-100);
  --bg-brand-subtle: var(--ez-color-brand-50);
  --bg-error-subtle: var(--ez-color-error-50);
  --bg-warning-subtle: var(--ez-color-warning-50);
  --bg-success-subtle: var(--ez-color-success-50);
  --bg-overlay: rgb(10 13 18 / 70%);

  /* Extensions (--ezx-*) — AA-safe fills and 700-step feedback text */
  --ezx-color-error-700: rgb(180 35 24);
  --ezx-color-warning-700: rgb(181 71 8);
  --ezx-color-success-700: rgb(6 118 71);
  --bg-brand-solid: var(--ez-color-brand-700);
  --bg-brand-solid-hover: var(--ez-color-brand-800);
  --text-on-brand-solid: var(--ez-color-white);
  --bg-error-solid: var(--ezx-color-error-700);
  --bg-error-solid-hover: rgb(145 32 24);
  --text-on-error-solid: var(--ez-color-white);

  /* Type */
  --font-body: Inter, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-display-sm: 1.875rem;

  /* Space, radius, elevation */
  --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;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgb(10 13 18 / 5%);
  --shadow-md: 0 4px 6px -1px rgb(10 13 18 / 10%), 0 2px 4px -2px rgb(10 13 18 / 6%);
  --shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 8%), 0 8px 8px -4px rgb(10 13 18 / 3%);

  --control-height: 40px;
  --container-max: 1280px;
  color-scheme: light;
}

/* Dark mode — semantic layer flips, primitives stay constant (.dark-mode contract). */
.dark-mode {
  --text-primary: var(--ez-color-gray-50);
  --text-secondary: var(--ez-color-gray-300);
  --text-tertiary: var(--ez-color-gray-400);
  --text-quaternary: var(--ez-color-gray-400);
  --text-brand: var(--ez-color-brand-300);
  --text-brand-action: var(--ez-color-brand-300);
  --text-error: var(--ez-color-error-100);
  --text-warning: var(--ez-color-warning-100);
  --text-success: var(--ez-color-success-100);

  --border-primary: var(--ez-color-gray-700);
  --border-secondary: var(--ez-color-gray-800);
  --border-brand: var(--ez-color-brand-400);

  --bg-primary: var(--ez-color-gray-900);
  --bg-secondary: var(--ez-color-gray-950);
  --bg-tertiary: var(--ez-color-gray-800);
  --bg-hover: var(--ez-color-gray-800);
  --bg-active: var(--ez-color-gray-700);
  --bg-brand-subtle: rgb(20 184 166 / 14%);
  --bg-error-subtle: rgb(240 68 56 / 16%);
  --bg-warning-subtle: rgb(247 144 9 / 16%);
  --bg-success-subtle: rgb(23 178 106 / 16%);
  --bg-overlay: rgb(10 13 18 / 80%);

  --bg-brand-solid: var(--ez-color-brand-400);
  --bg-brand-solid-hover: var(--ez-color-brand-300);
  --text-on-brand-solid: var(--ez-color-gray-950);
  --bg-error-solid: var(--ez-color-error-500);
  --bg-error-solid-hover: rgb(249 112 102);
  --text-on-error-solid: var(--ez-color-gray-950);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 30%);
  --shadow-xl: 0 20px 24px -4px rgb(0 0 0 / 50%), 0 8px 8px -4px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Focus uses an outline, as in button.tsx, so component shadows never hide it. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ez-color-brand-500);
  outline-offset: 2px;
}

:where(h1, h2, h3)[tabindex='-1']:focus-visible {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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