/* AltLeads TODAY — the design that is live at crm.altleads.com (13 Oct 2026).
   Every value here is copied from the real code (read only):
   new-code/web/src/index.css and lib/palettes.ts (default palette "Ocean Depth").
   Light = :root / .theme-light, Dark = html[data-theme="dark"] / .theme-dark.
   Font: Outfit Variable (the app's own @fontsource file). */
@font-face { font-family: 'Outfit Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, .theme-light {
  /* palette: Ocean Depth (light) — read live from crm.altleads.com on 13 Oct 2026 (html style); 3 values differ from lib/palettes.ts, marked */
  --color-brand: #2E7FBF;
  --color-brand-dark: #1B5A8C;
  --color-brand-light: #E8F4FD;
  --color-brand-subtle: rgba(46, 127, 191, 0.08);
  --color-surface: #F3F7FB;   /* live 13 Oct (code default #FAFCFE) */
  --color-page-bg: #EAF1F7;   /* live 13 Oct (code default #F0F5FA) */
  --color-surface-alt: #E8EFF6;
  --color-surface-hover: #DCE6F0;
  --color-surface-inset: #D0DBE8;
  --color-gray-50: #ECF2F8;   /* live 13 Oct */
  --color-gray-100: #E8EFF6;
  --color-gray-200: #CBD8E5;
  --color-gray-300: #AAC0D4;
  --color-gray-400: #7A95AD;
  --color-gray-500: #566F86;
  --color-gray-700: #2E4A5F;
  --color-gray-900: #1A2A3A;
  --color-text-muted: #566F86;
  --border-color: #CBD8E5;
  --border-input: #AAC0D4;

  /* status — index.css :root */
  --color-success: #4D9B5D;
  --color-danger: #C44D4D;
  --color-warning: #C89234;
  --color-info: #3A7CA5;
  --color-violet: #7C3AED;
  --color-on-brand: #FFFFFF;

  /* radius */
  --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-card: 12px; --radius-btn: 10px; --radius-input: 10px;
  --radius-badge: 999px; --radius-modal: 16px; --radius-xl: 20px; --radius-2xl: 24px;

  /* shadows (warm-tinted) */
  --shadow-xs: 0 1px 2px rgba(44,34,26,0.04);
  --shadow-sm: 0 1px 3px rgba(44,34,26,0.06), 0 1px 2px rgba(44,34,26,0.04);
  --shadow-md: 0 4px 6px -1px rgba(44,34,26,0.06), 0 2px 4px -2px rgba(44,34,26,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(44,34,26,0.08), 0 4px 6px -4px rgba(44,34,26,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(44,34,26,0.08), 0 8px 10px -6px rgba(44,34,26,0.04);

  --row-h: 52px;
  --line-tonal: rgba(17, 24, 39, 0.06);
  --row-hover-tint: #FBFCFE;
  --list-head-bg: #FFFFFF;
  --list-head-ink: #93A1B3;

  /* motion */
  --duration-instant: 150ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* space: n x 4px */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;

  /* shell */
  --sidebar-width: 256px;
  --topbar-height: 64px;
  --font-display: 'Outfit Variable', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Outfit Variable', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* tints — colour-mix of the status colours, re-resolve per mode */
:root, .theme-light, .theme-dark, html[data-theme="dark"] {
  --tint-success-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
  --tint-success-bd: color-mix(in srgb, var(--color-success) 28%, transparent);
  --tint-success-fg: var(--color-success);
  --tint-danger-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);
  --tint-danger-bd: color-mix(in srgb, var(--color-danger) 28%, transparent);
  --tint-danger-fg: var(--color-danger);
  --tint-warning-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --tint-warning-bd: color-mix(in srgb, var(--color-warning) 30%, transparent);
  --tint-warning-fg: var(--color-warning);
  --tint-info-bg: color-mix(in srgb, var(--color-info) 10%, transparent);
  --tint-info-bd: color-mix(in srgb, var(--color-info) 28%, transparent);
  --tint-info-fg: var(--color-info);
  --tint-violet-bg: color-mix(in srgb, var(--color-violet) 12%, transparent);
  --tint-violet-bd: color-mix(in srgb, var(--color-violet) 30%, transparent);
  --tint-violet-fg: var(--color-violet);
}

html[data-theme="dark"], .theme-dark {
  /* palette: Ocean Depth (dark) */
  --color-brand: #4DA8DA;
  --color-brand-dark: #7AC3E8;
  --color-brand-light: rgba(77, 168, 218, 0.15);
  --color-brand-subtle: rgba(77, 168, 218, 0.1);
  --color-surface: #1A2636;
  --color-page-bg: #111B28;
  --color-surface-alt: #1F2F42;
  --color-surface-hover: #263A50;
  --color-surface-inset: #16202E;
  --color-gray-50: #1A2636;
  --color-gray-100: #1F2F42;
  --color-gray-200: #2A3E55;
  --color-gray-300: #3A5068;
  --color-gray-400: #7A95AD;
  --color-gray-500: #8EAABE;
  --color-gray-700: #C5D5E4;
  --color-gray-900: #E8F0F6;
  --color-text-muted: #8EAABE;
  --border-color: #263A50;
  --border-input: #2A3E55;

  --color-success: #6DC47F;
  --color-danger: #E07474;
  --color-warning: #E0B056;
  --color-info: #7AB2D6;
  --color-violet: #A78BFA;
  --color-on-brand: #16202E;

  --row-hover-tint: color-mix(in srgb, var(--color-gray-200) 7%, var(--color-surface));
  --line-tonal: rgba(255, 255, 255, 0.06);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.25);
  --list-head-bg: var(--color-surface);
  --list-head-ink: var(--color-gray-500);
}