/* CRM CoPilot design tokens. The single source for color, spacing, radius, type,
 * shadow and stacking. New and migrated UI uses only these variables.
 *
 * Light is the default (:root). Dark applies when <html data-theme="dark"> is set
 * (theme.js), or when the page still uses the older body.dark-mode class.
 *
 * Contrast: every text/background pair named in tests/test_ui_tokens.py meets WCAG AA
 * (4.5:1 text, 3:1 large text and UI parts) in both themes. Run that test after
 * changing a color here.
 */
:root {
  /* --- color: surfaces --- */
  --ui-bg: #F5F7FB;              /* page background */
  --ui-surface: #FFFFFF;         /* cards, tables, panels */
  --ui-surface-raised: #FFFFFF;  /* modals, dropdowns, popovers (use with a shadow) */
  --ui-surface-hover: #EEF2F8;   /* row/item hover, secondary button hover */
  --ui-surface-sunken: #EDF1F7;  /* inputs on tinted areas, disabled fills */
  --ui-border: #DDE3EE;          /* dividers and card edges (decorative) */
  --ui-border-strong: #76839E;   /* input and control boundaries (3:1) */

  /* --- color: text --- */
  --ui-text-primary: #0B1533;
  --ui-text-secondary: #3D4B6B;
  --ui-text-muted: #5A6782;      /* still AA: helper text, captions, placeholders */

  /* --- color: brand --- */
  --ui-primary: #0A5CFF;         /* fills: primary buttons, active marks */
  --ui-primary-hover: #0848C7;
  --ui-primary-active: #063AA3;
  --ui-on-primary: #FFFFFF;      /* text/icons on primary or gradient fills: always white */
  --ui-primary-text: #0A55EB;    /* primary-colored text and links on surfaces */
  --ui-primary-subtle: #E8F0FF;  /* tinted backgrounds: selected rows, active nav */
  /* The one primary CTA per view may use the brand gradient. Every stop keeps white
     text at AA, so it is darker at the cyan end than the old #12CBEF. */
  --ui-primary-gradient: linear-gradient(115deg, #0A5CFF 0%, #1A6FF0 50%, #0A7DB0 100%);

  /* --- color: status (fill = white text on it; -text = text on surfaces; -subtle = tint) --- */
  --ui-success: #067647;
  --ui-success-text: #067647;
  --ui-success-subtle: #DCFAE6;
  --ui-warning: #B54708;
  --ui-warning-text: #B54708;
  --ui-warning-subtle: #FEF0C7;
  --ui-danger: #D92D20;
  --ui-danger-hover: #B42318;
  --ui-danger-text: #B42318;
  --ui-danger-subtle: #FEE4E2;
  --ui-on-status: #FFFFFF;

  /* --- color: focus and overlay --- */
  --ui-focus: #0A5CFF;
  --ui-focus-ring: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-focus);
  --ui-overlay: rgba(11, 21, 51, .55);   /* modal backdrop */

  /* --- email "paper": previews of an email show it as the recipient sees it (white) --- */
  --ui-paper: #FFFFFF;
  --ui-paper-text: #333333;      /* the generated email's own body color */
  --ui-paper-border: #DDE3EE;
  --ui-paper-link: #2563EB;

  /* --- spacing (4px grid) --- */
  --ui-space-0: 0;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;

  /* --- radius --- */
  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-xl: 16px;
  --ui-radius-full: 999px;

  /* --- type --- */
  --ui-font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui-text-xs: 12px;    /* captions, badges: never smaller */
  --ui-text-sm: 13px;
  --ui-text-base: 14px;  /* body and controls */
  --ui-text-md: 16px;
  --ui-text-lg: 18px;
  --ui-text-xl: 20px;
  --ui-text-2xl: 24px;   /* page titles */
  --ui-text-3xl: 30px;
  --ui-leading-tight: 1.25;
  --ui-leading-normal: 1.5;
  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;

  /* --- shadow --- */
  --ui-shadow-sm: 0 1px 2px rgba(11, 21, 51, .06);
  --ui-shadow-md: 0 4px 12px rgba(11, 21, 51, .08), 0 1px 3px rgba(11, 21, 51, .06);
  --ui-shadow-lg: 0 16px 40px rgba(11, 21, 51, .16), 0 4px 12px rgba(11, 21, 51, .08);

  /* --- stacking: base < sticky table columns < dropdowns < app header < overlay < modal < toast ---
     A modal opened from another modal sits a few steps above it:
     calc(var(--ui-z-modal) + 1..5) (tag picker 1, pitch wizard 3, video recorder 4 (opened
     from the pitch wizard, so it must sit above it),
     catalog import / who-buys-this 4, loading spinner 5). Everything stays below toasts. */
  --ui-z-base: 0;
  --ui-z-sticky: 10;
  --ui-z-dropdown: 100;
  --ui-z-header: 200;
  --ui-z-overlay: 1000;
  --ui-z-modal: 1010;
  --ui-z-toast: 1100;

  /* --- motion --- */
  --ui-duration-fast: 120ms;
  --ui-duration: 180ms;
  --ui-ease: cubic-bezier(.2, 0, 0, 1);

  /* --- control sizes (buttons, inputs) --- */
  --ui-control-sm: 28px;
  --ui-control-md: 36px;
  --ui-control-lg: 44px;

  color-scheme: light;
}

:root[data-theme="dark"],
body.dark-mode {
  --ui-bg: #0A1226;
  --ui-surface: #0E1730;
  --ui-surface-raised: #16213F;
  --ui-surface-hover: #1A2749;
  --ui-surface-sunken: #0A1226;
  --ui-border: #2A3A63;
  --ui-border-strong: #6274A6;

  --ui-text-primary: #EAF0FF;
  --ui-text-secondary: #B6C2DF;
  --ui-text-muted: #94A3C6;

  --ui-primary: #0A5CFF;
  --ui-primary-hover: #1F66F5;
  --ui-primary-active: #0848C7;
  --ui-on-primary: #FFFFFF;
  --ui-primary-text: #7FB0FF;
  --ui-primary-subtle: #15295A;
  --ui-primary-gradient: linear-gradient(115deg, #0A5CFF 0%, #1A6FF0 50%, #0A7DB0 100%);

  --ui-success: #067647;
  --ui-success-text: #3DD68C;
  --ui-success-subtle: #0F3324;
  --ui-warning: #B54708;
  --ui-warning-text: #FDB022;
  --ui-warning-subtle: #3A2C0B;
  --ui-danger: #D92D20;
  --ui-danger-hover: #B42318;
  --ui-danger-text: #FF8A80;
  --ui-danger-subtle: #3B1513;

  --ui-focus: #7FB0FF;
  --ui-overlay: rgba(2, 6, 18, .72);
  --ui-paper-border: #2A3A63;

  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* Utility: hidden on screen, still read by screen readers (labels for icon-only or
   placeholder-only controls). Lives here because every page loads tokens.css. */
.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}