/* =====================================================================
   Design tokens. Single source of truth. Builders: copy these names
   1:1 into the app (CSS custom properties or a Tailwind theme).
   Never hard-code a colour, size, radius, shadow or duration elsewhere.
   ===================================================================== */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Typography -------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* 6 sizes + 1 display. Line heights are paired per size. */
  --text-xs: 0.75rem;   /* 12  meta, timestamps, table headers      */
  --text-sm: 0.8125rem; /* 13  secondary text, labels, pills         */
  --text-md: 0.875rem;  /* 14  desktop body, controls, list rows     */
  --text-lg: 1rem;      /* 16  phone body, inputs everywhere, h3      */
  --text-xl: 1.25rem;   /* 20  section/pane titles, phone page title  */
  --text-2xl: 1.5rem;   /* 24  desktop page title, document totals    */
  --text-display: 2rem; /* 32  call screen name/timer only            */

  --lh-xs: 1rem;
  --lh-sm: 1.125rem;
  --lh-md: 1.25rem;
  --lh-lg: 1.5rem;
  --lh-xl: 1.75rem;
  --lh-2xl: 2rem;
  --lh-display: 2.5rem;

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

  /* ---- Colour: neutrals ------------------------------------------- */
  --color-canvas: #f5f6f8;       /* app background behind panes      */
  --color-surface: #ffffff;      /* panes, cards, inputs             */
  --color-surface-2: #f0f1f4;    /* hover, zebra, inset wells        */
  --color-surface-3: #e6e8ec;    /* pressed, selected-muted          */
  --color-line: #e2e4e9;         /* hairlines, dividers              */
  --color-line-strong: #c9cdd5;  /* button outlines, dashed placeholders (decorative, 1.6:1) */
  --color-control-border: #8a909b; /* input/select/textarea/switch-off borders: 3.2:1 non-text vs white (WCAG 1.4.11) */
  --color-ink: #16181d;          /* primary text        17.9:1 on white */
  --color-ink-2: #464c57;        /* secondary text       8.6:1 on white */
  --color-ink-3: #636a77;        /* meta text            5.4:1 on white, 4.9:1 on canvas */
  --color-ink-inverse: #ffffff;
  --color-scrim: rgba(22, 24, 29, 0.48);

  /* ---- Colour: action (product accent, brand-neutral) ------------- */
  --color-accent: #2251cc;        /* primary buttons, links, focus   6.6:1 on white */
  --color-accent-hover: #1b43ad;
  --color-accent-pressed: #163891;
  --color-accent-weak: #e9effc;   /* selected rows, accent pill bg    */
  --color-accent-ink: #1a3f9e;    /* text on accent-weak              7.4:1 */

  /* ---- Colour: status (always paired with a text label) ----------- */
  --color-good: #12693f;     --color-good-bg: #e4f3ea;      /* green: done, paid, connected   */
  --color-wait: #1a3f9e;     --color-wait-bg: #e9effc;      /* blue: waiting, sent, scheduled */
  --color-attn: #8a4a00;     --color-attn-bg: #fcefd8;      /* amber: needs attention, offline queue */
  --color-bad:  #b42318;     --color-bad-bg:  #fdeceb;      /* red: failed, missed, overdue, cancel */
  --color-hist: #464c57;     --color-hist-bg: #eceef2;      /* grey: history, draft, void     */
  --color-danger: #c42b1c;   --color-danger-hover: #a52416; /* destructive buttons (white text 5.4:1) */
  --color-call: #13804a;     --color-call-hover: #0f6b3d;   /* answer / call buttons (white text 5.0:1) */

  /* Document type identity: quote vs invoice must never look alike */
  --color-quote: #6b3fb3;    --color-quote-bg: #f2ecfb;     /* violet  7.0:1 on its bg */
  --color-invoice: #16181d;  --color-invoice-bg: #eceef2;   /* ink                    */

  /* ---- Spacing (4px base; only these values) ---------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radii (3) --------------------------------------------------- */
  --radius-sm: 6px;    /* inputs, buttons, chips, small tiles */
  --radius-md: 10px;   /* cards, panes, popovers, sheets top   */
  --radius-pill: 999px;/* status pills, avatars, segmented    */

  /* ---- Elevation (borders for surfaces; shadows ONLY for overlays) - */
  --shadow-1: 0 1px 2px rgba(22, 24, 29, 0.06);                         /* dragged card, sticky bar */
  --shadow-2: 0 8px 24px rgba(22, 24, 29, 0.12), 0 1px 3px rgba(22,24,29,.08); /* popover, toast, menu */
  --shadow-3: 0 24px 64px rgba(22, 24, 29, 0.24);                       /* modal, sheet, call card */

  /* ---- Focus ------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);

  /* ---- Motion ------------------------------------------------------ */
  --dur-fast: 120ms;    /* hover, press, toggles   */
  --dur-base: 200ms;    /* popovers, drawers fade  */
  --dur-slow: 320ms;    /* sheets, call screen     */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ------------------------------------------------------ */
  --sidebar-w: 240px;
  --rail-w: 76px;
  --pane-header-h: 56px;
  --phone-header-h: 56px;
  --tabbar-h: 60px;
  --tap: 44px;          /* minimum touch target */
  --control-h: 36px;    /* desktop control height */
  --control-h-touch: 44px;
  --z-sticky: 10; --z-popover: 40; --z-drawer: 50; --z-sheet: 60; --z-modal: 70; --z-call: 80; --z-toast: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}