/* AltLeads — new design system (13 Oct 2026). Built from the 23 picks in picks.md.
   Token names are AltLeads's own (new-code/web/src/lib/palettes.ts), so engineers can copy them straight into the app.
   Light = "Warm paper" (Notion), dark = "Soft charcoal" (Notion, measured), brand = Notion blue, font = Lato (Slack),
   size = Large text (Slack: 15px text, 48px rows, 36px buttons), corners = AltLeads today, icons = Lucide 2px line,
   movement = HubSpot "Even" (200ms ease-in-out for everything).
   TO CHANGE A COLOUR OR SIZE: change it here. Every screen and every component reads these values. */

@font-face { font-family: "Lato"; src: url("fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-700.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/lato-900.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }

:root, .theme-light {
  color-scheme: light;
  /* ---------- colour: page and greys (Warm paper) ---------- */
  --color-page-bg: #F9F8F7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F1EF;
  --color-surface-hover: #EFEEEC;
  --color-surface-inset: #E6E5E3;
  --color-gray-50: #F9F8F7;
  --color-gray-100: #F1F1EF;
  --color-gray-200: #E6E5E3;
  --color-gray-300: #D4D3CF;
  --color-gray-400: #A19E99;
  --color-gray-500: #7D7A75;
  --color-gray-700: #4D4B48;
  --color-gray-900: #2C2C2B;
  --color-text-muted: #7D7A75;
  --border-color: #E6E5E3;
  --border-input: #D4D3CF;
  --row-hover: #FBFBFA;

  /* ---------- colour: brand (Notion blue) ---------- */
  --color-brand: #2783DE;
  --color-brand-dark: #1F76CC;
  --color-brand-light: #E9F3FC;
  --color-brand-subtle: rgba(39, 131, 222, 0.10);
  --color-on-brand: #FFFFFF;
  --color-link: #2374C4;            /* brand made dark enough for 4.5:1 text on white */
  --focus-ring: 0 0 0 1px var(--color-link), 0 0 0 5px color-mix(in srgb, var(--color-link) 25%, transparent);

  /* ---------- colour: states ---------- */
  --color-success: #4D9B5D;
  --color-danger: #C44D4D;
  --color-warning: #C89234;
  --color-info: #3A7CA5;
  --color-violet: #7C3AED;

  /* ---------- stage tags (HubSpot square tag: tint, ink words, thin line) ---------- */
  --tag-blue-bg: #CEE3F7;   --tag-blue-fg: #1F5FA0;   --tag-blue-line: color-mix(in srgb, #2783DE 45%, transparent);
  --tag-violet-bg: #E8DBF2; --tag-violet-fg: #6430C4; --tag-violet-line: color-mix(in srgb, #7C3AED 45%, transparent);
  --tag-green-bg: #D7E6DD;  --tag-green-fg: #2F5F39;  --tag-green-line: color-mix(in srgb, #4D9B5D 45%, transparent);
  --tag-amber-bg: #F2E3B7;  --tag-amber-fg: #6E4F1A;  --tag-amber-line: color-mix(in srgb, #C89234 45%, transparent);
  --tag-red-bg: #F7D9D5;    --tag-red-fg: #8F3636;    --tag-red-line: color-mix(in srgb, #C44D4D 45%, transparent);
  --tag-grey-bg: #E6E5E3;   --tag-grey-fg: #4D4B48;   --tag-grey-line: color-mix(in srgb, #7D7A75 45%, transparent);

  /* ---------- inverse (dark notes, hints) ---------- */
  --color-inverse: #2C2C2B;
  --color-on-inverse: #FFFFFF;
  --scrim: rgba(26, 42, 58, .28);

  /* ---------- type (Lato, Large text) ---------- */
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px;
  --lh-tight: 1.25; --lh-body: 1.5;

  /* ---------- size and spacing ---------- */
  --row: 48px; --head: 44px; --ctl: 36px; --ctl-sm: 30px; --side-w: 248px; --top-h: 56px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---------- corners (AltLeads today: soft) ---------- */
  --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-btn: 10px; --radius-input: 10px;
  --radius-card: 12px; --radius-modal: 16px; --radius-xl: 20px; --radius-badge: 999px;

  /* ---------- shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(44,34,26,.04);
  --shadow-sm: 0 1px 3px rgba(44,34,26,.06), 0 1px 2px rgba(44,34,26,.04);
  --shadow-md: 0 4px 6px -1px rgba(44,34,26,.06), 0 2px 4px -2px rgba(44,34,26,.04);
  --shadow-lg: 0 10px 15px -3px rgba(44,34,26,.08), 0 4px 6px -4px rgba(44,34,26,.04);
  --shadow-menu: 0 0 0 1px rgba(15,15,15,.05), 0 3px 6px rgba(15,15,15,.1), 0 9px 24px rgba(15,15,15,.2);
  --shadow-panel: -8px 0 32px rgba(44,34,26,.12), -1px 0 0 var(--border-color);

  /* ---------- icons (Lucide, 2px line) ---------- */
  --icon-stroke: 2; --icon-stroke-on: 2.25; --icon-sm: 16px; --icon-md: 18px;

  /* ---------- movement (HubSpot "Even": one speed, one curve) ---------- */
  --dur: 200ms; --ease: ease-in-out; --dur-panel: 300ms; --dur-toast: 300ms; --tip-delay: 300ms;
}

html[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --color-page-bg: #191919;
  --color-surface: #202020;
  --color-surface-alt: #252525;
  --color-surface-hover: #2C2C2C;
  --color-surface-inset: #191919;
  --color-gray-50: #252525;
  --color-gray-100: #2C2C2C;
  --color-gray-200: #383836;
  --color-gray-300: #5F5E59;
  --color-gray-400: #7D7A75;
  --color-gray-500: #ADA9A3;
  --color-gray-700: #D3D1CB;
  --color-gray-900: #F0EFED;
  --color-text-muted: #ADA9A3;
  --border-color: #383836;
  --border-input: #5F5E59;
  --row-hover: #232323;

  --color-brand: #68A8E8;
  --color-brand-dark: #8EBEEE;
  --color-brand-light: #2B343E;
  --color-brand-subtle: rgba(104, 168, 232, 0.12);
  --color-on-brand: #16202E;
  --color-link: #7DB5EC;

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

  --tag-blue-bg: #24384D;   --tag-blue-fg: #A9CDF2;   --tag-blue-line: color-mix(in srgb, #68A8E8 45%, transparent);
  --tag-violet-bg: #352C47; --tag-violet-fg: #D5C8FA; --tag-violet-line: color-mix(in srgb, #A78BFA 45%, transparent);
  --tag-green-bg: #22382A;  --tag-green-fg: #B5E1BE;  --tag-green-line: color-mix(in srgb, #6DC47F 45%, transparent);
  --tag-amber-bg: #3D3220;  --tag-amber-fg: #F2DDB0;  --tag-amber-line: color-mix(in srgb, #E0B056 45%, transparent);
  --tag-red-bg: #432626;    --tag-red-fg: #F6C7C7;    --tag-red-line: color-mix(in srgb, #E07474 45%, transparent);
  --tag-grey-bg: #333331;   --tag-grey-fg: #D3D1CB;   --tag-grey-line: color-mix(in srgb, #ADA9A3 45%, transparent);

  --color-inverse: #3F3F3F;
  --color-on-inverse: #F0EFED;
  --scrim: rgba(0, 0, 0, .55);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.2);
  --shadow-menu: 0 0 0 1px rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.5);
  --shadow-panel: -8px 0 32px rgba(0,0,0,.45), -1px 0 0 var(--border-color);
}

/* .theme-light / .theme-dark: show one part in a fixed mode anywhere on a page (used on the components page) */
.theme-light, .theme-dark { background: var(--color-page-bg); color: var(--color-gray-900); }