/**
 * CounterMeasure Design System Tokens
 * @countermeasure-platform/web-components
 *
 * Canonical source: CounterMeasure Design System/colors_and_type.css.
 * The public design-system surface uses named --color-* variables while the
 * existing component and Tailwind plumbing continue to consume HSL triplets.
 */

:root {
  /* Type families */
  --font-sans: "Outfit", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Space Grotesk", "Sora", sans-serif;
  --font-body: "Outfit", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Composite type scale */
  --type-display: 700 40px/1.15 var(--font-display);
  --type-h1: 700 32px/1.2 var(--font-display);
  --type-h2: 600 24px/1.25 var(--font-display);
  --type-h3: 600 18px/1.35 var(--font-display);
  --type-h4: 600 15px/1.4 var(--font-sans);
  --type-body: 400 14px/1.55 var(--font-body);
  --type-body-sm: 400 13px/1.5 var(--font-body);
  --type-caption: 500 12px/1.4 var(--font-sans);
  --type-eyebrow: 700 11px/1.4 var(--font-sans);
  --type-label: 600 10.5px/1.3 var(--font-sans);
  --type-code: 500 12.5px/1.5 var(--font-mono);
  --type-code-sm: 500 11px/1.4 var(--font-mono);
  --type-metric: 700 22px/1 var(--font-display);

  --letter-eyebrow: 0.16em;
  --letter-label: 0.1em;
  --letter-tight: -0.02em;

  /* Brand and categorical palette, stored as HSL triplets for utility compatibility. */
  --orange-50: 33 100% 96.471%;
  --orange-100: 34 100% 91.765%;
  --orange-300: 31 97.163% 72.353%;
  --orange-400: 27 95.98% 60.98%;
  --orange-500: 25 94.979% 53.137%;
  --orange-600: 21 90.244% 48.235%;
  --orange-700: 17 88.35% 40.392%;

  --blue-400: 213 93.902% 67.843%;
  --blue-500: 217 91.22% 59.804%;
  --violet-400: 255 91.736% 76.275%;
  --violet-500: 258 89.535% 66.275%;
  --amber-400: 43 96.413% 56.275%;
  --amber-500: 38 92.126% 50.196%;
  --emerald-400: 158 64.372% 51.569%;
  --emerald-500: 160 84.08% 39.412%;
  --rose-400: 351 94.521% 71.373%;
  --rose-500: 350 89.163% 60.196%;
  --cyan-400: 188 85.714% 53.333%;
  --cyan-500: 189 94.495% 42.745%;
  --pink-400: 330 81.188% 60.392%;
  --yellow-400: 48 95.816% 53.137%;

  /* Core layout colors: default theme is dark. */
  --background: 0 0% 10.98%;
  --background-secondary: 0 0% 14.902%;
  --background-tertiary: 0 0% 6.667%;
  --foreground: 0 0% 98.039%;
  --foreground-secondary: 0 0% 63.922%;
  --foreground-tertiary: 0 0% 45.098%;
  --foreground-muted: 0 0% 32.157%;

  --surface: 0 0% 13.333%;
  --surface-alt: 0 0% 16.471%;
  --surface-hover: 0 0% 18.039%;

  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);

  --primary: var(--orange-500);
  --primary-hover: var(--orange-600);
  --primary-foreground: 0 0% 6.667%;

  --secondary: var(--background-secondary);
  --secondary-foreground: var(--foreground);
  --muted: var(--background-secondary);
  --muted-foreground: var(--foreground-secondary);
  --accent: var(--surface-hover);
  --accent-foreground: var(--foreground);

  --success: 142 70.563% 45.294%;
  --success-foreground: var(--background-tertiary);
  --success-muted: var(--success);
  --warning: var(--amber-500);
  --warning-foreground: var(--background-tertiary);
  --warning-muted: var(--warning);
  --danger: 0 84.236% 60.196%;
  --danger-foreground: 0 0% 100%;
  --danger-muted: var(--danger);
  --info: var(--blue-500);
  --info-foreground: var(--background-tertiary);
  --info-muted: var(--info);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);

  /* HSL triplet approximations for legacy hsl(var(--border)) consumers. */
  --border: 0 0% 23.922%;
  --input: var(--border);
  --ring: var(--primary);
  --focus-ring: var(--primary);
  --border-default: var(--border);
  --border-glass: var(--border);
  --border-subtle: 0 0% 18.039%;

  --text-primary: var(--foreground);
  --text-secondary: var(--foreground-secondary);
  --text-tertiary: var(--foreground-tertiary);
  --text-disabled: var(--foreground-muted);

  --hover-overlay: 0 0% 100%;
  --gradient-from: var(--orange-500);
  --gradient-to: var(--orange-400);
  --progress-default: var(--foreground-muted);
  --progress-success: var(--success);
  --progress-warning: var(--warning);
  --progress-danger: var(--danger);

  --accent-cyan: var(--cyan-400);
  --accent-rose: var(--rose-400);
  --accent-amber: var(--amber-400);
  --accent-violet: var(--violet-400);
  --accent-emerald: var(--emerald-400);
  --accent-primary: var(--primary);

  --background-elevated: var(--background-secondary);
  --background-surface: var(--surface);
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-alt);
  --surface-tertiary: var(--surface-hover);
  --bg-glass: 0 0% 100%;

  /* Theme.jsx-parity short-name aliases (preview/runtime overrides). */
  /* Severity / state */
  --critical: hsl(var(--accent-rose));
  --high: hsl(var(--orange-400));
  --medium: hsl(var(--accent-amber));
  --low: hsl(var(--accent-cyan));
  --ok: hsl(var(--accent-emerald));

  /* Numbered text ladder */
  --text-1: hsl(var(--foreground));
  --text-2: hsl(var(--foreground-secondary));
  --text-3: hsl(var(--foreground-tertiary));
  --text-4: hsl(var(--foreground-muted));

  /* Glass stack — runtime-overridden by GlassSlider */
  --bg-glass: rgba(255, 255, 255, 0.02);
  --bg-glass-2: rgba(255, 255, 255, 0.04);
  --bg-glass-3: rgba(255, 255, 255, 0.07);

  /* Surface ladder (alias to existing background ladder) */
  --bg-base: hsl(var(--background));
  --bg-app: hsl(var(--background));
  --bg-elev-1: hsl(var(--background-secondary));
  --bg-elev-2: hsl(var(--surface-hover));
  --bg-card: hsl(var(--surface));
  --bg-card-2: hsl(var(--surface-alt));
  --bg-input: hsl(var(--background-secondary));

  /* Border ladder */
  --border-2: hsl(var(--border) / 0.6);
  --border-3: hsl(var(--border) / 0.4);

  /* Brand triplet (matches active accent's primary hue) */
  --brand: hsl(var(--primary));
  --brand-hot: hsl(var(--primary-hover));
  --brand-soft: hsl(var(--primary) / 0.15);
  --accent-rgb: hsl(var(--primary));

  /* Density */
  --density-row: 36px;

  /* Diff-viewer line tints (used by editors/diff-viewer.ts).
   * Default values track --ok / --critical for visibility in dark themes. */
  --cmm-diff-added-bg: rgba(34, 197, 94, 0.18);
  --cmm-diff-added-gutter: rgba(34, 197, 94, 0.28);
  --cmm-diff-added-gutter-text: hsl(var(--accent-emerald));
  --cmm-diff-removed-bg: rgba(239, 68, 68, 0.2);
  --cmm-diff-removed-gutter: rgba(239, 68, 68, 0.32);
  --cmm-diff-removed-gutter-text: hsl(var(--accent-rose));
  --cmm-diff-gap-stripe: repeating-linear-gradient(
    135deg,
    rgba(148, 163, 184, 0.08) 0 6px,
    transparent 6px 12px
  );

  /* Named design-system aliases */
  --color-orange-50: hsl(var(--orange-500) / 0.1);
  --color-orange-100: hsl(var(--orange-500) / 0.2);
  --color-orange-300: hsl(var(--orange-300));
  --color-orange-400: hsl(var(--orange-400));
  --color-orange-500: hsl(var(--orange-500));
  --color-orange-600: hsl(var(--orange-600));
  --color-orange-700: hsl(var(--orange-700));

  --color-primary: hsl(var(--primary));
  --color-primary-hover: hsl(var(--primary-hover));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-text: var(--color-primary);
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.06);

  --color-blue-400: hsl(var(--blue-400));
  --color-blue-500: hsl(var(--blue-500));
  --color-violet-400: hsl(var(--violet-400));
  --color-violet-500: hsl(var(--violet-500));
  --color-amber-400: hsl(var(--amber-400));
  --color-amber-500: hsl(var(--amber-500));
  --color-emerald-400: hsl(var(--emerald-400));
  --color-emerald-500: hsl(var(--emerald-500));
  --color-rose-400: hsl(var(--rose-400));
  --color-rose-500: hsl(var(--rose-500));
  --color-cyan-400: hsl(var(--cyan-400));
  --color-cyan-500: hsl(var(--cyan-500));
  --color-pink-400: hsl(var(--pink-400));
  --color-yellow-400: hsl(var(--yellow-400));

  --color-bg-blue-10: hsl(var(--blue-400) / 0.1);
  --color-bg-violet-10: hsl(var(--violet-400) / 0.1);
  --color-bg-amber-10: hsl(var(--amber-400) / 0.1);
  --color-bg-emerald-10: hsl(var(--emerald-400) / 0.1);
  --color-bg-rose-10: hsl(var(--rose-400) / 0.1);
  --color-bg-cyan-10: hsl(var(--cyan-400) / 0.1);
  --color-blue-10: var(--color-bg-blue-10);
  --color-violet-10: var(--color-bg-violet-10);
  --color-amber-10: var(--color-bg-amber-10);
  --color-emerald-10: var(--color-bg-emerald-10);
  --color-rose-10: var(--color-bg-rose-10);
  --color-cyan-10: var(--color-bg-cyan-10);

  --color-success: hsl(var(--success));
  --color-success-text: var(--color-emerald-400);
  --color-warning: hsl(var(--warning));
  --color-warning-text: var(--color-amber-400);
  --color-error: hsl(var(--danger));
  --color-error-text: var(--color-rose-400);
  --color-error-bg: hsl(var(--danger) / 0.1);
  --color-info: hsl(var(--info));
  --color-info-text: var(--color-blue-400);
  --color-blue-text: var(--color-blue-400);
  --color-violet-text: var(--color-violet-400);
  --color-amber-text: var(--color-amber-400);
  --color-emerald-text: var(--color-emerald-400);
  --color-rose-text: var(--color-rose-400);
  --color-cyan-text: var(--color-cyan-400);

  --color-bg: hsl(var(--background));
  --color-background: var(--color-bg);
  --color-bg-secondary: hsl(var(--background-secondary));
  --color-bg-tertiary: hsl(var(--background-tertiary));
  --color-bg-hover: hsl(0 0% 100% / 0.05);
  --color-surface: hsl(var(--surface));
  --color-surface-alt: hsl(var(--surface-alt));
  --color-surface-hover: hsl(var(--surface-hover));
  --color-border: hsl(0 0% 100% / 0.12);

  --color-text: hsl(var(--foreground));
  --color-text-muted: hsl(var(--foreground-secondary));
  --color-text-dim: hsl(var(--foreground-tertiary));
  --color-text-disabled: hsl(var(--foreground-muted));

  /* Backward-compatible named aliases used by older package CSS. */
  --color-secondary: hsl(var(--orange-700));
  --color-accent: hsl(var(--orange-400));
  --color-accent-cyan: var(--color-cyan-500);
  --color-accent-rose: var(--color-rose-500);
  --color-accent-amber: var(--color-amber-500);
  --color-accent-violet: var(--color-violet-500);
  --color-accent-emerald: var(--color-emerald-500);
  --color-violet: var(--color-violet-400);
  --color-violet-hover: var(--color-violet-500);
  --color-violet-dim: var(--color-bg-violet-10);
  --color-violet-glow: hsl(var(--violet-400) / 0.3);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2);
  --shadow-glow-primary: 0 0 16px -4px var(--color-primary);
  --shadow-glow: 0 0 20px hsl(var(--primary) / 0.3), 0 4px 12px hsl(var(--primary) / 0.2);
  --shadow-glow-rose: 0 0 20px hsl(var(--accent-rose) / 0.4), 0 4px 12px hsl(var(--accent-rose) / 0.25);
  --shadow-glow-amber: 0 0 20px hsl(var(--accent-amber) / 0.4), 0 4px 12px hsl(var(--accent-amber) / 0.25);
  --shadow-glow-violet: 0 0 20px hsl(var(--accent-violet) / 0.4), 0 4px 12px hsl(var(--accent-violet) / 0.25);
  --shadow-glow-cyan: 0 0 20px hsl(var(--accent-cyan) / 0.4), 0 4px 12px hsl(var(--accent-cyan) / 0.25);

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;
  --sheet-width: 28rem;

  /* Motion */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Z-index scale */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;

  /* Glass variables */
  --glass-blur: 20px;
  --glass-surface: hsl(0 0% 100% / 0.05);
  --glass-surface-hover: hsl(0 0% 100% / 0.1);
  --glass-border: hsl(0 0% 100% / 0.08);
  --glass-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
  --glass-glow: hsl(var(--violet-400) / 0.06);

  /* Legacy component token aliases wired to the canonical design-system surface. */
  --cmm-bg-primary: var(--color-bg);
  --cmm-bg-secondary: var(--color-bg-secondary);
  --cmm-bg-tertiary: var(--color-bg-tertiary);
  --cmm-bg-surface: var(--color-surface);
  --cmm-text-primary: var(--color-text);
  --cmm-text-secondary: var(--color-text-muted);
  --cmm-text-muted: var(--color-text-muted);
  --cmm-text-disabled: var(--color-text-disabled);
  --cmm-border: var(--color-border);
  --cmm-accent: var(--color-primary);
  --cmm-accent-hover: var(--color-primary-hover);
  --cmm-focus-ring: hsl(var(--primary) / 0.3);
  --color-backdrop: hsl(0 0% 0% / 0.5);

  --cmm-auth-card-bg: var(--color-surface);
  --cmm-auth-border: var(--color-border);
  --cmm-auth-title: var(--color-text);
  --cmm-auth-text-muted: var(--color-text-muted);
  --cmm-auth-label: var(--color-text);
  --cmm-auth-input-bg: var(--color-bg-secondary);
  --cmm-auth-input-text: var(--color-text);
  --cmm-auth-placeholder: var(--color-text-dim);
  --cmm-auth-focus: var(--color-primary);
  --cmm-auth-focus-ring: hsl(var(--primary) / 0.3);
  --cmm-auth-error: var(--color-error);
  --cmm-auth-error-bg: var(--color-error-bg);
  --cmm-auth-success: var(--color-success);
  --cmm-auth-success-bg: var(--color-bg-emerald-10);
  --cmm-auth-info: var(--color-info);
  --cmm-auth-info-bg: var(--color-bg-blue-10);
  --cmm-auth-link: var(--color-cyan-400);
  --cmm-auth-btn-primary-bg: var(--color-primary);
  --cmm-auth-btn-primary-hover: var(--color-primary-hover);
  --cmm-auth-btn-primary-text: var(--color-primary-foreground);
  --cmm-auth-btn-secondary-text: var(--color-text);
  --cmm-auth-btn-secondary-hover: var(--color-surface-hover);
  --cmm-auth-passkey-bg: var(--color-surface);
  --cmm-auth-passkey-hover: var(--color-surface-hover);
  --cmm-auth-passkey-text: var(--color-text);

  --cmm-consent-bg: var(--color-surface);
  --cmm-consent-border: var(--color-border);
  --cmm-consent-text: var(--color-text-muted);
  --cmm-consent-text-muted: var(--color-text-muted);
  --cmm-consent-title: var(--color-text);
  --cmm-consent-link: var(--color-cyan-400);
  --cmm-consent-link-hover: var(--color-cyan-500);
  --cmm-consent-modal-bg: var(--color-surface);
  --cmm-consent-focus-ring: var(--color-primary);
  --cmm-consent-btn-primary-bg: var(--color-primary);
  --cmm-consent-btn-primary-hover: var(--color-primary-hover);
  --cmm-consent-btn-primary-text: var(--color-primary-foreground);
  --cmm-consent-btn-secondary-bg: var(--color-bg-secondary);
  --cmm-consent-btn-secondary-hover: var(--color-surface-hover);
  --cmm-consent-btn-secondary-text: var(--color-text);
  --cmm-consent-btn-secondary-border: var(--color-border);
  --cmm-consent-toggle-off: var(--color-bg-tertiary);
  --cmm-consent-toggle-on: var(--color-primary);

  --cmm-editor-keyword: var(--color-violet-400);
  --cmm-editor-operator: var(--color-cyan-400);
  --cmm-editor-string: var(--color-emerald-400);
  --cmm-editor-number: var(--color-amber-400);
  --cmm-editor-comment: var(--color-text-dim);
  --cmm-editor-variable: var(--color-blue-400);
  --cmm-editor-function: var(--color-cyan-400);
  --cmm-editor-type: var(--color-blue-400);
  --cmm-editor-property: var(--color-violet-400);
  --cmm-editor-atom: var(--color-amber-400);
  --cmm-editor-meta: var(--color-text-dim);
  --cmm-editor-label: var(--color-primary);
  --cmm-editor-namespace: var(--color-cyan-400);
  --cmm-editor-regexp: var(--color-rose-400);
  --cmm-editor-bracket: var(--color-text-muted);
  --cmm-editor-punctuation: var(--color-text-muted);
  --cmm-editor-tag: var(--color-rose-400);
  --cmm-editor-attribute: var(--color-amber-400);
  --cmm-editor-selection: hsl(var(--primary) / 0.2);
  --cmm-editor-active-line: var(--color-bg-hover);
  --cmm-editor-bracket-match: hsl(var(--primary) / 0.3);
  --cmm-editor-selection-match: var(--color-bg-emerald-10);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
}

.light,
[data-theme="light"] {
  color-scheme: light;

  --background: 210 40% 98.039%;
  --background-secondary: 210 40% 96.078%;
  --background-tertiary: 214 31.818% 91.373%;
  --foreground: 222 47.368% 11.176%;
  --foreground-secondary: 215 19.318% 34.51%;
  --foreground-tertiary: 215 16.318% 46.863%;
  --foreground-muted: 215 20.225% 65.098%;

  --surface: 0 0% 100%;
  --surface-alt: 210 40% 98.039%;
  --surface-hover: 210 40% 96.078%;

  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);

  --secondary: var(--background-secondary);
  --secondary-foreground: var(--foreground);
  --muted: var(--background-secondary);
  --muted-foreground: var(--foreground-secondary);
  --accent: var(--surface-hover);
  --accent-foreground: var(--foreground);

  --success-foreground: 0 0% 100%;
  --warning-foreground: 0 0% 100%;
  --info-foreground: 0 0% 100%;

  --border: 220 6.667% 91.176%;
  --input: var(--border);
  --border-default: var(--border);
  --border-glass: var(--border);
  --border-subtle: 214 31.818% 91.373%;

  --text-primary: var(--foreground);
  --text-secondary: var(--foreground-secondary);
  --text-tertiary: var(--foreground-tertiary);
  --text-disabled: var(--foreground-muted);

  --hover-overlay: 0 0% 0%;
  --progress-default: var(--foreground-muted);
  --background-elevated: var(--surface);
  --background-surface: var(--surface-alt);
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-alt);
  --surface-tertiary: var(--surface-hover);

  --color-orange-50: hsl(var(--orange-50));
  --color-orange-100: hsl(var(--orange-100));
  --color-primary-text: hsl(15 79.104% 33.137%);
  --color-primary-light: hsl(var(--primary) / 0.06);

  --color-bg: hsl(var(--background));
  --color-background: var(--color-bg);
  --color-bg-secondary: hsl(var(--background-secondary));
  --color-bg-tertiary: hsl(var(--background-tertiary));
  --color-bg-hover: hsl(0 0% 0% / 0.03);
  --color-surface: hsl(var(--surface));
  --color-surface-alt: hsl(var(--surface-alt));
  --color-surface-hover: hsl(var(--surface-hover));
  --color-border: hsl(222 47.368% 11.176% / 0.1);

  --color-text: hsl(var(--foreground));
  --color-text-muted: hsl(var(--foreground-secondary));
  --color-text-dim: hsl(var(--foreground-tertiary));
  --color-text-disabled: hsl(var(--foreground-muted));
  --color-success-text: hsl(161 93.548% 24.314%);
  --color-warning-text: hsl(31.765 91.892% 29.02%);
  --color-error-text: hsl(0 73.708% 41.765%);
  --color-info-text: hsl(221.212 83.193% 53.333%);
  --color-blue-text: hsl(221.212 83.193% 53.333%);
  --color-violet-text: hsl(262.122 83.255% 57.843%);
  --color-amber-text: hsl(31.765 91.892% 29.02%);
  --color-emerald-text: hsl(161 93.548% 24.314%);
  --color-rose-text: hsl(345.345 82.979% 40.196%);
  --color-cyan-text: hsl(192.923 82.979% 31.569%);

  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(15 23 42 / 0.25);
  --shadow-card: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.06);

  /* Theme.jsx-parity overrides for light theme */
  --bg-glass: rgba(15, 23, 42, 0.02);
  --bg-glass-2: rgba(15, 23, 42, 0.04);
  --bg-glass-3: rgba(15, 23, 42, 0.07);
  --bg-base: hsl(var(--background));
  --bg-app: hsl(var(--background));
  --bg-elev-1: hsl(var(--background-secondary));
  --bg-elev-2: hsl(var(--surface-hover));
  --bg-card: hsl(var(--surface));
  --bg-card-2: hsl(var(--surface-alt));
  --bg-input: hsl(var(--surface));
  --border-2: hsl(var(--border) / 0.6);
  --border-3: hsl(var(--border) / 0.4);
  --text-1: hsl(var(--foreground));
  --text-2: hsl(var(--foreground-secondary));
  --text-3: hsl(var(--foreground-tertiary));
  --text-4: hsl(var(--foreground-muted));
  --brand: hsl(var(--primary));
  --brand-hot: hsl(var(--primary-hover));
  --brand-soft: hsl(var(--primary) / 0.15);
  --accent-rgb: hsl(var(--primary));

  /* Diff-viewer line tints — slightly stronger fills + darker text on light surfaces */
  --cmm-diff-added-bg: rgba(34, 197, 94, 0.22);
  --cmm-diff-added-gutter: rgba(34, 197, 94, 0.34);
  --cmm-diff-added-gutter-text: hsl(var(--color-emerald-text));
  --cmm-diff-removed-bg: rgba(239, 68, 68, 0.22);
  --cmm-diff-removed-gutter: rgba(239, 68, 68, 0.34);
  --cmm-diff-removed-gutter-text: hsl(var(--color-rose-text));
  --cmm-diff-gap-stripe: repeating-linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.08) 0 6px,
    transparent 6px 12px
  );
}

.monokai,
[data-theme="monokai"] {
  color-scheme: dark;

  --background: 70 8.108% 14.51%;
  --background-secondary: 70 6.383% 18.431%;
  --background-tertiary: 75 6.667% 11.765%;
  --foreground: 60 30% 96.078%;
  --foreground-secondary: 60 8.197% 76.078%;
  --foreground-tertiary: 50 10.9% 41.373%;

  --surface: 69 8.235% 16.667%;
  --surface-alt: 69 7.071% 19.412%;
  --surface-hover: 69 6.306% 21.765%;

  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);

  --primary: 32 98.23% 55.686%;
  --primary-hover: 42 93.407% 64.314%;
  --secondary: var(--background-secondary);
  --secondary-foreground: var(--foreground);
  --muted: var(--background-secondary);
  --muted-foreground: var(--foreground-secondary);
  --accent: var(--emerald-400);
  --accent-foreground: var(--background);

  --success: 80 75.63% 53.333%;
  --success-foreground: var(--background);
  --warning: var(--primary);
  --warning-foreground: var(--background);
  --danger: 338 94.619% 56.275%;
  --danger-foreground: var(--foreground);
  --info: 190 81.065% 66.863%;
  --info-foreground: var(--background);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-foreground);

  --border: 70 4.286% 27.451%;
  --input: var(--background-secondary);
  --ring: var(--primary);
  --focus-ring: var(--primary);
  --border-default: var(--border);
  --border-glass: var(--border);
  --border-subtle: 70 6.383% 24%;

  --text-primary: var(--foreground);
  --text-secondary: var(--foreground-secondary);
  --text-tertiary: var(--foreground-tertiary);

  --accent-cyan: 190 81.065% 66.863%;
  --accent-rose: 338 94.619% 56.275%;
  --accent-amber: var(--primary);
  --accent-violet: 261 100% 75.294%;
  --accent-emerald: 80 75.63% 53.333%;
  --accent-primary: var(--primary);

  --emerald-400: 80 75.63% 53.333%;
  --rose-400: 338 94.619% 56.275%;
  --violet-400: 261 100% 75.294%;
  --blue-400: 190 81.065% 66.863%;

  --background-elevated: var(--background-secondary);
  --background-surface: var(--surface);
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-alt);
  --surface-tertiary: var(--surface-hover);

  --color-bg: hsl(var(--background));
  --color-background: var(--color-bg);
  --color-bg-secondary: hsl(var(--background-secondary));
  --color-bg-tertiary: hsl(var(--background-tertiary));
  --color-surface: hsl(var(--surface));
  --color-surface-alt: hsl(var(--surface-alt));
  --color-surface-hover: hsl(var(--surface-hover));
  --color-border: hsl(60 30% 96.078% / 0.16);

  --color-text: hsl(var(--foreground));
  --color-text-muted: hsl(var(--foreground-secondary));
  --color-text-dim: hsl(var(--foreground-tertiary));

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 14px 30px -18px rgb(0 0 0 / 0.7);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);

  /* Theme.jsx-parity overrides for monokai theme */
  --critical: hsl(var(--accent-rose));
  --high: hsl(var(--accent-amber));
  --medium: hsl(var(--accent-amber));
  --low: hsl(var(--accent-cyan));
  --ok: hsl(var(--accent-emerald));
  --bg-glass: rgba(255, 255, 255, 0.02);
  --bg-glass-2: rgba(255, 255, 255, 0.04);
  --bg-glass-3: rgba(255, 255, 255, 0.07);
  --bg-base: hsl(var(--background));
  --bg-app: hsl(var(--background));
  --bg-elev-1: hsl(var(--background-secondary));
  --bg-elev-2: hsl(var(--surface-hover));
  --bg-card: hsl(var(--surface));
  --bg-card-2: hsl(var(--surface-alt));
  --bg-input: hsl(var(--background-secondary));
  --border-2: hsl(var(--border) / 0.6);
  --border-3: hsl(var(--border) / 0.4);
  --text-1: hsl(var(--foreground));
  --text-2: hsl(var(--foreground-secondary));
  --text-3: hsl(var(--foreground-tertiary));
  --text-4: hsl(var(--foreground-muted));
  --brand: hsl(var(--primary));
  --brand-hot: hsl(var(--primary-hover));
  --brand-soft: hsl(var(--primary) / 0.15);
  --accent-rgb: hsl(var(--primary));
}

.glass,
[data-theme="glass"] {
  color-scheme: dark;

  --background: 240 23.077% 5.098%;
  --background-secondary: 240 11.628% 8.431%;
  --background-tertiary: 240 10% 11.765%;
  --foreground: 240 21.053% 92.549%;
  --foreground-secondary: 240 10.753% 63.529%;
  --foreground-tertiary: 240 9.804% 40%;

  --surface: 240 12% 9.804%;
  --surface-alt: 240 10% 11.765%;
  --surface-hover: 240 6.667% 14.706%;

  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);

  --primary: var(--orange-500);
  --primary-hover: var(--orange-400);
  --secondary: var(--surface-alt);
  --secondary-foreground: var(--foreground);
  --muted: var(--surface-alt);
  --muted-foreground: var(--foreground-secondary);
  --accent: var(--surface-hover);
  --accent-foreground: var(--foreground);

  --success: var(--emerald-400);
  --warning: var(--amber-400);
  --danger: var(--rose-400);
  --info: var(--orange-500);

  --border: 240 7.692% 12.745%;
  --input: var(--surface-alt);
  --border-default: var(--border);
  --border-glass: var(--border);
  --border-subtle: 240 7.692% 10%;

  --text-primary: var(--foreground);
  --text-secondary: var(--foreground-secondary);
  --text-tertiary: var(--foreground-tertiary);

  --background-elevated: var(--surface-hover);
  --background-surface: var(--surface);
  --surface-primary: var(--surface);
  --surface-secondary: var(--surface-alt);
  --surface-tertiary: var(--surface-hover);
  --bg-glass: 0 0% 100%;

  --color-bg: hsl(var(--background));
  --color-background: var(--color-bg);
  --color-bg-secondary: hsl(0 0% 100% / 0.035);
  --color-bg-tertiary: hsl(0 0% 100% / 0.07);
  --color-surface: hsl(0 0% 100% / 0.05);
  --color-surface-alt: hsl(0 0% 100% / 0.07);
  --color-surface-hover: hsl(0 0% 100% / 0.1);
  --color-border: hsl(0 0% 100% / 0.08);

  --color-text: hsl(var(--foreground));
  --color-text-muted: hsl(var(--foreground-secondary));
  --color-text-dim: hsl(var(--foreground-tertiary));

  --glass-blur: 20px;
  --glass-surface: hsl(0 0% 100% / 0.05);
  --glass-surface-hover: hsl(0 0% 100% / 0.1);
  --glass-border: hsl(0 0% 100% / 0.08);
  --glass-shadow: 0 24px 72px rgb(0 0 0 / 0.45);
  --glass-glow: hsl(var(--violet-400) / 0.06);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 30px -10px rgb(0 0 0 / 0.7);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);

  /* Theme.jsx-parity overrides for glass theme */
  --bg-glass: rgba(255, 255, 255, 0.02);
  --bg-glass-2: rgba(255, 255, 255, 0.04);
  --bg-glass-3: rgba(255, 255, 255, 0.07);
  --bg-base: hsl(var(--background));
  --bg-app: hsl(var(--background));
  --bg-elev-1: hsl(0 0% 100% / 0.05);
  --bg-elev-2: hsl(0 0% 100% / 0.1);
  --bg-card: hsl(0 0% 100% / 0.05);
  --bg-card-2: hsl(0 0% 100% / 0.07);
  --bg-input: hsl(0 0% 100% / 0.04);
  --border-2: hsl(0 0% 100% / 0.06);
  --border-3: hsl(0 0% 100% / 0.04);
  --text-1: hsl(var(--foreground));
  --text-2: hsl(var(--foreground-secondary));
  --text-3: hsl(var(--foreground-tertiary));
  --text-4: hsl(var(--foreground-muted));
  --brand: hsl(var(--primary));
  --brand-hot: hsl(var(--primary-hover));
  --brand-soft: hsl(var(--primary) / 0.15);
  --accent-rgb: hsl(var(--primary));
}

[data-accent="cyan"] {
  --primary: var(--cyan-500);
  --primary-hover: var(--cyan-400);
  --accent-primary: var(--primary);
  --gradient-from: var(--cyan-500);
  --gradient-to: var(--cyan-400);
  --color-secondary: hsl(192 91.4% 36.5%);
  --color-accent: hsl(var(--cyan-400));
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.1);
}

[data-accent="violet"] {
  --primary: var(--violet-500);
  --primary-hover: var(--violet-400);
  --accent-primary: var(--primary);
  --gradient-from: var(--violet-500);
  --gradient-to: var(--violet-400);
  --color-secondary: hsl(263 70% 50.4%);
  --color-accent: hsl(var(--violet-400));
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.1);
}

[data-accent="rose"] {
  --primary: var(--rose-500);
  --primary-hover: var(--rose-400);
  --accent-primary: var(--primary);
  --gradient-from: var(--rose-500);
  --gradient-to: var(--rose-400);
  --color-secondary: hsl(347 77% 49.8%);
  --color-accent: hsl(var(--rose-400));
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.1);
}

[data-accent="emerald"] {
  --primary: var(--emerald-500);
  --primary-hover: var(--emerald-400);
  --accent-primary: var(--primary);
  --gradient-from: var(--emerald-500);
  --gradient-to: var(--emerald-400);
  --color-secondary: hsl(161 94% 30.4%);
  --color-accent: hsl(var(--emerald-400));
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.1);
}

[data-accent="amber"] {
  --primary: var(--amber-500);
  --primary-hover: var(--amber-400);
  --accent-primary: var(--primary);
  --gradient-from: var(--amber-500);
  --gradient-to: var(--amber-400);
  --color-secondary: hsl(31.765 91.892% 29.02%);
  --color-accent: hsl(var(--amber-400));
  --color-primary-alpha: hsl(var(--primary) / 0.15);
  --color-primary-light: hsl(var(--primary) / 0.1);
}

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

html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-body);
}

h1 {
  margin: 0;
  font: var(--type-h1);
  letter-spacing: var(--letter-tight);
}

h2 {
  margin: 0;
  font: var(--type-h2);
  letter-spacing: var(--letter-tight);
}

h3 {
  margin: 0;
  font: var(--type-h3);
}

h4 {
  margin: 0;
  font: var(--type-h4);
}

p {
  margin: 0;
  font: var(--type-body);
}

small {
  font: var(--type-caption);
  color: var(--color-text-dim);
}

code,
kbd,
pre {
  font: var(--type-code);
}

:focus-visible {
  outline: 2px solid hsl(var(--focus-ring));
  outline-offset: 2px;
}

::selection {
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

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