/*
 * Passport design tokens
 *
 * This file is the source of truth for the web product surfaces.
 * Components may add surface-specific layout rules, but they should consume
 * these semantic values instead of introducing another colour, type, or
 * geometry ramp. The compatibility aliases keep the existing component CSS
 * readable while the application migrates toward the passport-* vocabulary.
 */

:root {
  --passport-page: #ffffff;
  --passport-surface: #ffffff;
  --passport-panel: #fafafa;
  --passport-subtle: #f2f2f2;
  --passport-hover: #fafafa;

  --passport-border: #e6e6e6;
  --passport-border-strong: #d6d6d6;
  --passport-border-stronger: #b8b8b8;

  --passport-ink: #0a0a0a;
  --passport-ink-secondary: #525252;
  --passport-ink-muted: #666666;
  --passport-ink-faint: #737373;

  --passport-brand: #ff5c1a;
  --passport-brand-text: #b93800;
  --passport-brand-hover: #8f2d00;
  --passport-brand-wash: rgba(255, 92, 26, 0.14);
  --passport-brand-line: rgba(255, 92, 26, 0.34);

  --passport-primary: #0a0a0a;
  --passport-primary-hover: #262626;
  --passport-primary-ink: #ffffff;

  --passport-ok: #166534;
  --passport-ok-bg: rgba(21, 128, 61, 0.1);
  --passport-warn: #92400e;
  --passport-warn-bg: rgba(180, 83, 9, 0.1);
  --passport-warn-line: rgba(180, 83, 9, 0.24);
  --passport-bad: #b91c1c;
  --passport-bad-bg: rgba(185, 28, 28, 0.1);
  --passport-bad-line: rgba(185, 28, 28, 0.24);
  /* Solid fill for count badges; its ink stays at 4.5:1 or better. */
  --passport-bad-solid: #b91c1c;
  --passport-bad-solid-ink: #ffffff;
  --passport-idle: #737373;
  --passport-idle-ink: #666666;

  --passport-code-bg: #0a0a0a;
  --passport-code-ink: #ededed;
  /* Code blocks stay dark in both themes. */
  --passport-code-line: #262626;
  --passport-code-ink-muted: #7a7a7a;
  --passport-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -36px rgba(0, 0, 0, 0.25);
  /* The one backdrop behind dialogs, drawers, and the compact nav. */
  --passport-scrim: rgba(0, 0, 0, 0.48);

  --passport-radius-sm: 4px;
  --passport-radius-md: 6px;
  --passport-radius-lg: 8px;
  --passport-radius-pill: 999px;

  --passport-space-1: 4px;
  --passport-space-2: 8px;
  --passport-space-3: 12px;
  --passport-space-4: 16px;
  --passport-space-5: 20px;
  --passport-space-6: 24px;
  --passport-space-7: 32px;

  /* Type scale, integer px only. The steps are the sizes the app renders
     most: 12.5 and 13.5 px text snaps to 12, 13, or 14 px, so moving a rule
     onto the scale barely changes it. Page titles use --passport-title. */
  --passport-text-xs: 11px;
  --passport-text-sm: 12px;
  --passport-text-md: 13px;
  --passport-text-lg: 14px;
  --passport-text-xl: 16px;
  --passport-title: 24px;

  --passport-page-title-size: var(--passport-title);
  --passport-page-title-size-compact: 19px;
  --passport-page-title-leading: 1.25;
  --passport-page-title-tracking: -0.025em;
  --passport-page-gap: 20px;

  /* Two control heights for buttons, inputs, and selects: small for dense
     rows and secondary actions, medium for everything else. The large one is
     only for the public site and the auth pages: their CTAs and inputs. */
  --passport-control-h-sm: 28px;
  --passport-control-h-md: 32px;
  --passport-control-h-lg: 44px;
  --passport-control-height: var(--passport-control-h-md);
  --passport-control-height-compact: var(--passport-control-h-sm);
  --passport-focus-width: 2px;
  --passport-focus-offset: 2px;

  --passport-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --passport-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --passport-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --passport-focus: var(--passport-brand);

  /* Existing application names. Keep these aliases in one place so the
     surface styles cannot quietly drift apart again. */
  --bg: var(--passport-page);
  --surface: var(--passport-surface);
  --surface-2: var(--passport-panel);
  --surface-3: var(--passport-subtle);
  --hover: var(--passport-hover);
  --ink: var(--passport-ink);
  --ink-strong: var(--passport-ink);
  --heading: var(--passport-ink);
  --ink-2: var(--passport-ink-secondary);
  --ink-3: var(--passport-ink-muted);
  --ink-4: var(--passport-ink-faint);
  --line: var(--passport-border);
  --line-soft: var(--passport-subtle);
  --line-2: var(--passport-border-strong);
  --line-strong: var(--passport-border-stronger);
  --accent: var(--passport-brand-text);
  --accent-hover: var(--passport-brand-hover);
  --accent-signal: var(--passport-brand);
  --accent-wash: var(--passport-brand-wash);
  --accent-line: var(--passport-brand-line);
  --signal: var(--passport-brand);
  --signal-ink: var(--passport-ink);
  --signal-text: var(--passport-brand-text);
  --signal-wash: var(--passport-brand-wash);
  --selected: rgba(255, 92, 26, 0.1);
  --selected-fg: var(--passport-brand-text);
  --primary: var(--passport-primary);
  --primary-hover: var(--passport-primary-hover);
  --primary-fg: var(--passport-primary-ink);
  --primary-ink: var(--passport-primary-ink);
  --avatar-ink: #ffffff;
  --toast-bg: var(--passport-code-bg);
  --toast-ink: var(--passport-code-ink);
  --code-bg: var(--passport-code-bg);
  --code-fg: var(--passport-code-ink);
  --ok: var(--passport-ok);
  --ok-bg: var(--passport-ok-bg);
  --warn: var(--passport-warn);
  --warn-bg: var(--passport-warn-bg);
  --warn-line: var(--passport-warn-line);
  --bad: var(--passport-bad);
  --bad-bg: var(--passport-bad-bg);
  --bad-line: var(--passport-bad-line);
  --bad-solid: var(--passport-bad-solid);
  --bad-solid-ink: var(--passport-bad-solid-ink);
  --idle: var(--passport-idle);
  --idle-ink: var(--passport-idle-ink);
  --enterprise: var(--passport-ink-secondary);
  --enterprise-bg: var(--passport-panel);
  --toggle-off: var(--passport-border-strong);
  --toggle-off-border: var(--passport-border-stronger);
  --shadow: var(--passport-shadow);
  --scrim: var(--passport-scrim);
  --shadow-1: var(--passport-shadow);
  --r: var(--passport-radius-sm);
  --r-md: var(--passport-radius-md);
  --r-lg: var(--passport-radius-lg);
  --r-pill: var(--passport-radius-pill);
  --radius: var(--passport-radius-sm);
  --space-1: var(--passport-space-1);
  --space-2: var(--passport-space-2);
  --space-3: var(--passport-space-3);
  --space-4: var(--passport-space-4);
  --space-5: var(--passport-space-5);
  --space-6: var(--passport-space-6);
  --space-7: var(--passport-space-7);
  --text-xs: var(--passport-text-xs);
  --text-sm: var(--passport-text-sm);
  --text-md: var(--passport-text-md);
  --text-lg: var(--passport-text-lg);
  --text-xl: var(--passport-text-xl);
  --title: var(--passport-title);
  --page-title-size: var(--passport-page-title-size);
  --page-title-size-compact: var(--passport-page-title-size-compact);
  --page-title-leading: var(--passport-page-title-leading);
  --page-title-tracking: var(--passport-page-title-tracking);
  --page-gap: var(--passport-page-gap);
  --control-height: var(--passport-control-height);
  --control-height-sm: var(--passport-control-height-compact);
  --control-height-compact: var(--passport-control-height-compact);
  --control-h-sm: var(--passport-control-h-sm);
  --control-h-md: var(--passport-control-h-md);
  --control-h-lg: var(--passport-control-h-lg);
  --focus-width: var(--passport-focus-width);
  --focus-offset: var(--passport-focus-offset);
  --display: var(--passport-display);
  --body: var(--passport-body);
  --mono: var(--passport-mono);

  color-scheme: light;
  font-family: var(--passport-body);
  color: var(--passport-ink);
  font-size: var(--passport-text-lg);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] {
  --passport-page: #0a0a0a;
  --passport-surface: #111111;
  --passport-panel: #1a1a1a;
  --passport-subtle: #1f1f1f;
  --passport-hover: #1a1a1a;

  --passport-border: #292929;
  --passport-border-strong: #3d3d3d;
  --passport-border-stronger: #5a5a5a;

  --passport-ink: #ededed;
  --passport-ink-secondary: #b0b0b0;
  --passport-ink-muted: #a1a1a1;
  --passport-ink-faint: #888888;

  --passport-brand-text: #ff7a45;
  --passport-brand-hover: #ff9a70;
  --passport-brand-wash: rgba(255, 92, 26, 0.14);
  --passport-brand-line: rgba(255, 92, 26, 0.34);
  --passport-primary: #ededed;
  --passport-primary-hover: #ffffff;
  --passport-primary-ink: #0a0a0a;

  --passport-ok: #34d399;
  --passport-ok-bg: rgba(52, 211, 153, 0.12);
  --passport-warn: #fbbf24;
  --passport-warn-bg: rgba(251, 191, 36, 0.12);
  --passport-warn-line: rgba(251, 191, 36, 0.28);
  --passport-bad: #f87171;
  --passport-bad-bg: rgba(248, 113, 113, 0.12);
  --passport-bad-line: rgba(248, 113, 113, 0.28);
  --passport-bad-solid: #c81e1e;
  --passport-bad-solid-ink: #ffffff;
  --passport-idle: #888888;
  --passport-idle-ink: #a1a1a1;
  --passport-code-bg: #0a0a0a;
  --passport-code-ink: #ededed;
  --passport-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -32px rgba(0, 0, 0, 0.8);
  --passport-scrim: rgba(0, 0, 0, 0.64);
  --selected: rgba(255, 92, 26, 0.14);
  --selected-fg: var(--passport-brand-text);
  --enterprise-bg: var(--passport-panel);
  --toggle-off: var(--passport-border);
  --toggle-off-border: var(--passport-border-strong);

  color-scheme: dark;
}