/* Mail Sniper design tokens — single source of truth for the SPA.
   Brand: teal primary on dark surfaces; purple kept only as rare accent (not glow decor). */

:root {
  /* —— Color: surfaces —— */
  --color-bg: #07090d;
  --color-bg-subtle: #0c1017;
  --color-surface: #121722;
  --color-surface-raised: #171d2b;
  --color-surface-sunken: #0b0f16;

  /* —— Color: text —— */
  --color-text: #ecf1f8;
  --color-text-secondary: #8b97ad;
  --color-text-muted: #7b879c;
  --color-text-inverse: #042f2e;

  /* —— Color: borders —— */
  --color-border: #243044;
  --color-border-strong: #2e3b54;
  --color-border-subtle: #1b2332;

  /* —— Color: brand / primary (teal) —— */
  --color-primary: #14b8a6;
  --color-primary-hover: #2dd4bf;
  --color-primary-active: #0d9488;
  --color-primary-subtle: rgba(45, 212, 191, 0.12);
  --color-primary-border: rgba(45, 212, 191, 0.28);

  /* —— Color: accent (sparingly) —— */
  --color-accent: #a78bfa;
  --color-accent-subtle: rgba(167, 139, 250, 0.12);

  /* —— Color: semantic status —— */
  --color-success: #34d399;
  --color-success-subtle: rgba(52, 211, 153, 0.12);
  --color-success-border: rgba(52, 211, 153, 0.28);
  --color-success-text: #99f6e4;

  --color-warning: #fb923c;
  --color-warning-subtle: rgba(251, 146, 60, 0.12);
  --color-warning-border: rgba(251, 146, 60, 0.28);
  --color-warning-text: #fed7aa;

  --color-danger: #fb7185;
  --color-danger-subtle: rgba(251, 113, 133, 0.12);
  --color-danger-border: rgba(251, 113, 133, 0.28);
  --color-danger-text: #fecdd3;
  --color-danger-surface: #3f1d27;

  --color-info: #38bdf8;
  --color-info-subtle: rgba(56, 189, 248, 0.12);
  --color-info-border: rgba(56, 189, 248, 0.28);

  /* —— Typography —— */
  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-display: 2rem;       /* 32 */
  --text-page: 1.5rem;        /* 24 */
  --text-section: 1.125rem;   /* 18 */
  --text-body: 0.875rem;      /* 14 */
  --text-small: 0.8125rem;    /* 13 */
  --text-meta: 0.75rem;       /* 12 */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* —— Spacing scale —— */
  --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;

  /* —— Radius —— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* —— Shadows (overlays only) —— */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);

  /* —— Z-index —— */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 40;
  --z-popover: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* —— Motion (UI Craft 2026) —— */
  --motion-instant: 90ms;
  --motion-fast: 130ms;
  --motion-normal: 170ms;
  --motion-overlay: 220ms;
  --motion-large: 260ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-move: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Tooltip / popover craft */
  --tooltip-delay: 450ms;
  --tooltip-max-width: 280px;

  /* —— Controls (forensic craft) —— */
  --control-height: 36px;
  --control-height-sm: 32px;
  --control-height-lg: 44px;
  --control-pad-x: var(--space-3);
  --control-pad-y: var(--space-2);
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --row-height: 44px;
  --table-header-height: 40px;
  --chip-height: 28px;
  --tooltip-pad-x: var(--space-2);
  --tooltip-pad-y: 6px;
  --tooltip-gap: var(--space-2);

  /* —— Page rhythm —— */
  --page-pad-x: var(--space-6);
  --page-pad-y: var(--space-5);
  --section-gap: var(--space-6);
  --stack-gap: var(--space-4);
  --label-gap: var(--space-2);
  --toolbar-gap: var(--space-3);
  --title-subtitle-gap: var(--space-2);
  --subtitle-toolbar-gap: var(--space-4);

  /* —— Scrollbars —— */
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(139, 151, 173, 0.45);
  --scrollbar-thumb-hover: rgba(139, 151, 173, 0.7);
  --scrollbar-track: transparent;

  /* —— Layout —— */
  --rail-width: 64px;
  --rail-width-expanded: 232px;
  --rail-drawer-width: 280px;
  --content-max: 1280px;
  --prose-max: 42rem;
  --form-max: 32rem;
  --touch-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* —— Focus —— */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);

  /* —— Breakpoints (documentation; media queries use literals) —— */
  /* --bp-mobile: 640px; --bp-tablet: 1024px; */

  /* —— Legacy aliases (compat during migration) —— */
  --bg: var(--color-bg);
  --bg-2: var(--color-bg-subtle);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-raised);
  --line: var(--color-border);
  --line-2: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --faint: var(--color-text-muted);
  --teal: var(--color-primary-hover);
  --teal-2: var(--color-primary);
  --purple: var(--color-accent);
  --purple-2: #8b5cf6;
  --orange: var(--color-warning);
  --pink: #f472b6;
  --red: var(--color-danger);
  --green: var(--color-success);
  --yellow: #fbbf24;
  --shadow: var(--shadow-lg);
  --radius: var(--radius-lg);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast: 0ms;
    --motion-normal: 0ms;
    --motion-overlay: 0ms;
    --motion-large: 0ms;
    --tooltip-delay: 0ms;
  }
}