/* Blinds Direct Agentic Quote System — Design Tokens
 * Ported verbatim from data/dashboard-ui/DESIGN.md.
 * If a value needs to change, edit DESIGN.md first, then mirror the change
 * here. Variable names follow the spec: --color-{name}, --rounded-{level},
 * --spacing-{level}.
 *
 * NO HEX LITERALS may appear outside this file. Component CSS must reference
 * tokens via var(--color-...).
 */
:root {
  /* Colors */
  --color-primary: #18181B;
  --color-on-primary: #FAFAFA;

  --color-secondary: #3F3F46;
  --color-on-secondary: #FAFAFA;

  --color-tertiary: #2563EB;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-soft: #DBEAFE;

  --color-neutral: #FFFFFF;
  --color-on-neutral: #09090B;
  --color-on-neutral-muted: #71717A;
  --color-neutral-muted: #F4F4F5;
  --color-neutral-strong: #E4E4E7;

  --color-border: #E4E4E7;
  --color-border-strong: #D4D4D8;
  --color-border-focus: #2563EB;

  --color-success: #15803D;
  --color-on-success: #FFFFFF;
  --color-success-soft: #DCFCE7;

  --color-warning: #854D0E;
  --color-on-warning: #FFFFFF;
  --color-warning-soft: #FEF3C7;

  --color-danger: #B91C1C;
  --color-on-danger: #FFFFFF;
  --color-danger-soft: #FEE2E2;

  --color-info: #1D4ED8;
  --color-on-info: #FFFFFF;
  --color-info-soft: #DBEAFE;

  /* Rounded */
  --rounded-xs: 6px;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-pill: 9999px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", monospace;

  /* Shadows (overlay components only) */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 20px 40px -10px rgba(0, 0, 0, 0.18);

  /* Motion */
  --motion-fast: 200ms;
  --motion-base: 250ms;
  --motion-slow: 350ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Height */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Overlay & Tooltip Colors */
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --color-tooltip: #09090B;
  --color-on-tooltip: #FAFAFA;
  --color-ring: #2563EB;

  /* Z-Index Scale */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-overlay: 1040;
  --z-index-modal: 1060;
  --z-index-popover: 1070;
  --z-index-tooltip: 1080;
  --z-index-toast: 1100;

  /* Layout */
  --layout-sidebar-w: 192px;
  --layout-sidebar-w-collapsed: 56px;
  --layout-topbar-h: 56px;
}

html, body {
  font-family: var(--font-sans);
  color: var(--color-on-neutral);
  background: var(--color-neutral);
}

*:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--rounded-xs);
}