/* Leadline design tokens: the one file for every colour, size, radius, shadow,
   font and motion value. Nothing else declares one.

   Rules:
   - A screen uses a token, never a raw hex or a raw font size.
   - One font family: Inter (variable, self-hosted). No second family.
   - 12px is the floor for any text a person reads. 14px is the app's base,
     16px is reading text. Sizes and line heights come from the type scale below.
   - Every control is at least 24x24 (WCAG 2.2 target size); 32 on pointer and
     44 on touch. `--target-min` is the floor the test defends.
   - The focus ring is 2px in --brand with a 2px offset and follows the corner.
   - No border colours, light shadows only, one coral accent for actions.

   The contrast test (tests/design-tokens.test.mjs) reads this file and checks
   every pair listed in docs/DESIGN-TOKENS.md at 4.5:1 or better. */

/* Inter 5.3.0 (SIL Open Font License, public/assets/fonts/Inter-OFL.3f7694ca27.txt), one variable
   file per script range. The optical-size axis redraws the letters for each size, so 12px
   labels and 24px titles both look right. Latin-ext carries Slovenian letters (č š ž). */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-5.3.0-latin-ext-opsz.b5a272c589.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;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-5.3.0-latin-opsz.2870bcb8ec.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;
}

:root {
  /* ---------- colour ---------- */
  --teal: #0e2732;
  --teal-deep: #0a1d25;
  --teal-soft: #134e4a;
  --coral: #cd4b2f;
  --coral-dark: #b83318;
  --coral-soft: #f7e3dc;
  --cream: #faf6ef;
  --cream-2: #f3ecdf;
  --cream-3: #ece3d3;
  --paper: #ffffff;
  --ink: #16211f;
  --muted: #566364;
  --muted-2: var(--muted);
  --good: #1f5c3a;
  --good-bg: #e7f2ea;
  --warn: #8a5a12;
  --warn-bg: #fbf0db;
  --bad: #9e2f1f;
  --bad-bg: #fbe9e6;
  --cool: #33505e;
  --cool-bg: #edf1f4;
  --white: #ffffff;
  /* Chart bars and the status dot on the dark engine panel. Not text. */
  --chart-replied: #5c8f6f;
  --chart-contacted: #d8a54a;
  --chart-lost: #c9c4ba;
  --chart-new: #8fb3b8;
  --dot-good: #9fe0b4;

  /* Semantic aliases. A new screen should reach for these names. */
  --page: var(--cream);
  --surface: var(--paper);
  --surface-2: var(--cream-2);
  --surface-3: var(--cream-3);
  --ink-2: var(--muted);
  --brand: var(--teal);
  --brand-2: var(--teal-soft);
  --action: var(--coral);
  --action-hover: var(--coral-dark);
  --action-tint: var(--coral-soft);

  /* ---------- shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 28, 45, 0.04);
  --shadow-field: inset 0 0 0 1px rgba(14, 39, 50, 0.1), var(--shadow-xs); /* the edge of an input or a select */
  --shadow-sm: 0 1px 3px rgba(15, 28, 45, 0.05), 0 6px 16px rgba(15, 28, 45, 0.035);
  --shadow-md: 0 12px 32px rgba(15, 28, 45, 0.1);
  --shadow-coral: 0 6px 18px rgba(205, 75, 47, 0.28);

  /* ---------- radius ---------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- type ---------- */
  /* One family for everything. The fallbacks are metric-close, so nothing jumps on load. */
  --font-body: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Scale: whole pixels, every line height on the 4px grid. Size and line travel together. */
  --text-xs: 12px;       --line-xs: 16px;       /* captions, meta, badges, table headers */
  --text-sm: 14px;       --line-sm: 20px;       /* the app: body, tables, buttons, labels, nav */
  --text-base: 16px;     --line-base: 24px;     /* reading text, marketing body, inputs on phones */
  --text-lg: 20px;       --line-lg: 28px;       /* panel and drawer headings */
  --text-xl: 24px;       --line-xl: 32px;       /* page and modal titles */
  --text-display: 32px;  --line-display: 40px;  /* big numbers, the sign-in headline */
  /* Marketing site only: fluid display sizes. */
  --text-hero: clamp(36px, 5vw, 56px);       --line-hero: 1.08;
  --text-section: clamp(28px, 3.6vw, 40px);  --line-section: 1.12;
  /* Weights: three. Regular reads, medium names a thing, strong labels, headings and numbers. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  /* Inter's optical size already tightens large text; only small caps labels need tracking. */
  --track-caps: 0.04em;

  /* ---------- rows ---------- */
  --row-alt: #fbf8f2;
  --row-hover: var(--cream-2);
  --row-selected: var(--coral-soft);

  /* ---------- space: a 4px grid ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --page-margin: var(--space-5);
  --content-max: 1240px;

  /* ---------- size ---------- */
  --shell: 1120px;
  --app-sidebar: 208px;
  --page-header: 48px;
  --empty-art: 96px;
  --row-height: 44px;
  --control-sm: 32px;
  --control-md: 36px;
  --control: 44px;
  --grid-row: 40px;
  --grid-head: 32px;
  --target-min: 24px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---------- motion ---------- */
  --motion-hover: 120ms;
  --motion-panel: 160ms;
}