/* Itera design system v2. GENERATED by apps/brand/scripts/design-system/build.mjs.
   Edit ladder.mjs, not this file. Consume only --s-* and --c-*. */

/* ─── PRIMITIVE */
:root {
  --p-sand-50: #f6f1e7;
  --p-sand-100: #e8e0d0;
  --p-sand-200: #c9c0b4;
  --p-sand-300: #a89e8f;
  --p-sand-350: #887f71;
  --p-sand-400: #7d7568;
  --p-sand-500: #5a5249;
  --p-sand-600: #3a3530;
  --p-sand-700: #2a2622;
  --p-sand-800: #1f1c18;
  --p-sand-850: #1a1714;
  --p-sand-900: #141210;
  --p-sand-950: #0a0908;
  --p-sand-1000: #050404;
  --p-green-100: #d2eed9;
  --p-green-400: #7ad79a;
  --p-green-500: #5ec27e;
  --p-green-700: #2f7a4a;
  --p-green-900: #143b22;
  --p-yellow-400: #f0c875;
  --p-yellow-500: #e0b04a;
  --p-yellow-700: #9c781f;
  --p-yellow-900: #4a3b12;
  --p-blue-400: #9ab9e8;
  --p-blue-500: #7aa2e0;
  --p-blue-700: #3b5c9c;
  --p-blue-900: #1a2b4c;
  --p-red-400: #e89898;
  --p-red-500: #e07a7a;
  --p-red-700: #9c3b3b;
  --p-red-900: #4c1a1a;
  --p-amber: #E07A4A;
  --p-blue: #7aa2e0;
  --p-green: #5ec27e;
  --p-lilac: #b58fe0;
  --p-mustard: #e0b04a;
  --p-teal: #7ad6cd;
  --p-coral: #e07a7a;
  --p-mint: #7ae0a8;
  --p-peach: #e0b8a8;
  --p-periwinkle: #9aa8e0;
  --p-font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --p-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --p-text-11: 11px;
  --p-text-13: 13px;
  --p-text-15: 15px;
  --p-text-16: 16px;
  --p-text-28: 28px;
  --p-text-36: 36px;
  --p-text-44: 44px;
  --p-text-64: 64px;
  --p-weight-400: 400;
  --p-weight-500: 500;
  --p-weight-600: 600;
  --p-leading-display: 1.1;
  --p-leading-tight: 1.2;
  --p-leading-snug: 1.4;
  --p-leading-meta: 1.45;
  --p-leading-body: 1.5;
  --p-leading-normal: 1.55;
  --p-leading-prose: 1.6;
  --p-leading-relaxed: 1.7;
  --p-tracking-tight: -0.3px;
  --p-tracking-normal: 0;
  --p-tracking-wide: 0.5px;
  --p-tracking-wider: 0.8px;
  --p-tracking-eyebrow: 1px;
  --p-space-0: 0;
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-radius-0: 0;
  --p-radius-sm: 4px;
  --p-radius-pill: 999px;
  --p-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --p-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --p-duration-fast: 120ms;
  --p-duration: 180ms;
  --p-duration-slow: 280ms;
  --p-bp-phone: 0px;
  --p-bp-sm: 640px;
  --p-bp-md: 768px;
  --p-bp-lg: 1024px;
  --p-bp-xl: 1280px;
  --p-bp-2xl: 1536px;
  --p-touch-target: 44px;
  --p-touch-comfort: 48px;
  --p-evergreen-300: #62d996;
  --p-evergreen-400: #52d58a;
  --p-evergreen-500: #3fd17f;
  --p-evergreen-600: #32a765;
}

/* ─── SEMANTIC */
:root {
  --s-surface-stage: var(--p-sand-1000);
  --s-surface-page: var(--p-sand-950);
  --s-surface-panel: var(--p-sand-900);
  --s-surface-raised: var(--p-sand-850);
  --s-surface-elevated: var(--p-sand-800);
  --s-surface-overlay: var(--p-sand-850);
  --s-surface-scrim: rgba(10, 9, 8, 0.72);
  --s-border-subtle: var(--p-sand-700);
  --s-border-strong: var(--p-sand-600);
  --s-border-focus: var(--p-evergreen-500);
  --s-ink-primary: var(--p-sand-50);
  --s-ink-secondary: var(--p-sand-200);
  --s-ink-muted: var(--p-sand-350);
  --s-ink-disabled: var(--p-sand-500);
  --s-ink-inverse: var(--p-sand-950);
  --s-brand-solid: var(--p-evergreen-500);
  --s-brand-hover: var(--p-evergreen-400);
  --s-brand-pressed: var(--p-evergreen-600);
  --s-brand-fg: var(--p-evergreen-300);
  --s-brand-subtle: rgba(63, 209, 127, 0.10);
  --s-brand-border: rgba(63, 209, 127, 0.22);
  --s-brand-ring: rgba(63, 209, 127, 0.45);
  --s-agent: var(--p-lilac);
  --s-success-solid: var(--p-green-500);
  --s-success-fg: var(--p-green-400);
  --s-success-subtle: rgba(94, 194, 126, 0.12);
  --s-success-border: rgba(94, 194, 126, 0.40);
  --s-warning-solid: var(--p-yellow-500);
  --s-warning-fg: var(--p-yellow-400);
  --s-warning-subtle: rgba(224, 176, 74, 0.12);
  --s-warning-border: rgba(224, 176, 74, 0.40);
  --s-danger-solid: var(--p-red-500);
  --s-danger-fg: var(--p-red-400);
  --s-danger-subtle: rgba(224, 122, 122, 0.12);
  --s-danger-border: rgba(224, 122, 122, 0.40);
  --s-info-solid: var(--p-blue-500);
  --s-info-fg: var(--p-blue-400);
  --s-info-subtle: rgba(122, 162, 224, 0.12);
  --s-info-border: rgba(122, 162, 224, 0.40);
  --s-font-display: var(--p-font-display);
  --s-font-body: var(--p-font-sans);
  --s-font-mono: var(--p-font-mono);
  --s-text-meta: var(--p-text-11);
  --s-text-body: var(--p-text-13);
  --s-text-lead: var(--p-text-15);
  --s-text-display: var(--p-text-28);
  --s-text-input-touch: var(--p-text-16);
  --s-text-marketing-md: var(--p-text-36);
  --s-text-marketing-lg: var(--p-text-44);
  --s-text-marketing-xl: var(--p-text-64);
}

/* ─── COMPONENT */
:root {
  --c-radius: var(--p-radius-sm);
  --c-focus-ring: 0 0 0 3px var(--s-brand-ring);
  --c-button-radius: var(--c-radius);
  --c-button-h: 30px;
  --c-button-h-touch: var(--c-touch);
  --c-button-font-weight: var(--p-weight-500);
  --c-button-primary-bg: var(--s-brand-solid);
  --c-button-primary-fg: var(--s-ink-inverse);
  --c-button-primary-border: var(--s-brand-solid);
  --c-button-primary-bg-hover: var(--s-brand-hover);
  --c-button-primary-bg-active: var(--s-brand-pressed);
  --c-button-secondary-bg: transparent;
  --c-button-secondary-fg: var(--s-ink-secondary);
  --c-button-secondary-fg-hover: var(--s-ink-primary);
  --c-button-secondary-border: var(--s-border-subtle);
  --c-button-secondary-bg-hover: transparent;
  --c-button-secondary-border-hover: var(--s-border-strong);
  --c-button-ghost-fg: var(--s-ink-secondary);
  --c-button-ghost-bg-hover: var(--s-surface-panel);
  --c-button-destructive-bg: transparent;
  --c-button-destructive-fg: var(--s-danger-fg);
  --c-button-destructive-border: var(--s-danger-border);
  --c-button-destructive-bg-hover: var(--s-danger-subtle);
  --c-button-success-bg: var(--s-success-solid);
  --c-button-success-fg: var(--s-ink-inverse);
  --c-button-success-border: var(--s-success-solid);
  --c-input-bg: var(--s-surface-page);
  --c-input-fg: var(--s-ink-primary);
  --c-input-placeholder: var(--s-ink-muted);
  --c-input-border: var(--s-border-subtle);
  --c-input-border-hover: var(--s-border-strong);
  --c-input-border-focus: var(--s-border-focus);
  --c-input-ring-focus: var(--s-brand-ring);
  --c-input-border-error: var(--s-danger-solid);
  --c-input-radius: var(--c-radius);
  --c-input-font-touch: var(--s-text-input-touch);
  --c-card-bg: var(--s-surface-panel);
  --c-card-bg-raised: var(--s-surface-raised);
  --c-card-border: var(--s-border-subtle);
  --c-card-border-hover: var(--s-border-strong);
  --c-card-radius: var(--c-radius);
  --c-card-padding: var(--p-space-5);
  --c-dialog-bg: var(--s-surface-overlay);
  --c-dialog-border: var(--s-border-strong);
  --c-dialog-radius: var(--c-radius);
  --c-dialog-scrim: var(--s-surface-scrim);
  --c-tooltip-bg: var(--s-surface-raised);
  --c-tooltip-fg: var(--s-ink-primary);
  --c-tooltip-border: var(--s-border-strong);
  --c-tooltip-radius: var(--c-radius);
  --c-table-header-fg: var(--s-ink-muted);
  --c-table-header-bg: transparent;
  --c-table-divider: var(--s-border-subtle);
  --c-table-row-hover-bg: var(--s-surface-panel);
  --c-tabs-fg: var(--s-ink-muted);
  --c-tabs-fg-active: var(--s-ink-primary);
  --c-tabs-indicator: var(--s-brand-solid);
  --c-tabs-divider: var(--s-border-subtle);
  --c-avatar-ring: var(--s-surface-panel);
  --c-avatar-fallback-bg: var(--s-surface-elevated);
  --c-badge-radius: var(--c-radius);
  --c-pill-radius: var(--p-radius-pill);
  --c-eyebrow-font: var(--s-font-mono);
  --c-eyebrow-size: var(--s-text-meta);
  --c-eyebrow-weight: var(--p-weight-500);
  --c-eyebrow-tracking: var(--p-tracking-eyebrow);
  --c-progress-h: 3px;
  --c-nav-item-h: 30px;
  --c-nav-item-h-collapsed: 36px;
  --c-touch: var(--p-touch-target);
  --c-sidebar-w: 232px;
  --c-sidebar-w-collapsed: 56px;
  --c-header-h: 56px;
  --c-statusbar-h: 28px;
  --c-content-max: 1280px;
}

/* ─── Base ────────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--s-surface-page);
  color: var(--s-ink-primary);
  font-family: var(--s-font-body);
  font-size: var(--s-text-body);
  line-height: var(--p-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }

::selection { background: var(--s-brand-solid); color: var(--s-ink-inverse); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s-border-strong); border-radius: var(--p-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--s-ink-muted); }

.mono {
  font-family: var(--s-font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.meta {
  font-family: var(--s-font-mono);
  font-size: var(--s-text-meta);
  line-height: var(--p-leading-meta);
  color: var(--s-ink-muted);
}
.eyebrow {
  font-family: var(--c-eyebrow-font);
  font-size: var(--c-eyebrow-size);
  font-weight: var(--c-eyebrow-weight);
  letter-spacing: var(--c-eyebrow-tracking);
  text-transform: uppercase;
}
.display {
  font-family: var(--s-font-display);
  font-size: var(--s-text-display);
  font-weight: var(--p-weight-600);
  line-height: var(--p-leading-display);
  letter-spacing: var(--p-tracking-tight);
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { border: none; background: transparent; cursor: pointer; }

@media (pointer: coarse) {
  input, select, textarea { font-size: var(--c-input-font-touch); }
}

:where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid var(--s-border-focus);
  outline-offset: 2px;
}

@keyframes dfl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dfl-spin  { to { transform: rotate(360deg); } }
@keyframes dfl-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
@keyframes dfl-record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,122,122,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(224,122,122,0); }
}
@keyframes dfl-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }