/*
  Tradie Drive Desktop, Phase 1 design tokens.
  Desktop only. The phone app stays dark and is not touched.
  Every spacing value on screen is a multiple of 8 (the half step is for icon gaps only).
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/Inter-latin-var.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --bg: #F5F6F8;              /* the app background behind cards */
  --surface: #FFFFFF;         /* every card, pane, drawer, input */
  --surface-muted: #F9FAFB;   /* quiet blocks inside a white surface */
  --surface-hover: #F2F4F7;   /* hover on rows and icon buttons */
  --surface-selected: #EAECF0;/* the open conversation, the selected row */
  --border: #E4E7EC;          /* hairlines between panes and rows */
  --border-strong: #D0D5DD;   /* inputs, outlined buttons */

  /* Text */
  --text: #101828;            /* near black */
  --text-2: #475467;          /* secondary */
  --text-3: #5B6475;          /* tertiary: timestamps, helper text (still AA) */

  /* Ink: the brand navy, used for selected chips, today marker, tooltips */
  --ink: #0A1628;

  /* Orange. ONE value, RESERVED for: the active nav pill, primary buttons,
     unread indicators, outgoing bubbles, links. Nothing else is orange. */
  --orange: #F97316;
  --orange-hover: #EA6C00;
  --on-orange: #0A1628;       /* text and icons on an orange fill (7:1) */
  --on-orange-2: #431407;     /* small text on an orange fill (timestamps in bubbles) */
  --orange-text: #C2410C;     /* links and orange words on white (AA, 5.2:1) */

  /* Status colours, the same small set the app already uses (green, red) plus amber for no-show */
  --green: #15803D;
  --green-bg: #ECFDF3;
  --green-line: #22C55E;
  --red: #B42318;
  --red-bg: #FEF3F2;
  --red-line: #EF4444;
  --amber: #B54708;
  --amber-bg: #FFFAEB;

  /* Type: Inter, the brand font of the website. 14 base, 13 secondary and the floor. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-base: 14px;   --lh-base: 20px;
  --fs-sm: 13px;     --lh-sm: 18px;
  --fs-md: 16px;     --lh-md: 24px;
  --fs-lg: 20px;     --lh-lg: 28px;
  --fs-xl: 28px;     --lh-xl: 32px;   /* a number that IS the card */
  --w-regular: 400;  --w-medium: 500;  --w-semibold: 600;  --w-bold: 700;

  /* Spacing: 8px grid */
  --s-half: 4px;
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 40px;  --s6: 48px;  --s8: 64px;

  /* Radii */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* Shadows, very light. Borders do the separating, shadows only lift things that float. */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-2: 0 4px 16px rgba(16, 24, 40, 0.08);
  --sh-3: 0 8px 32px rgba(16, 24, 40, 0.14);

  /* Focus ring: white gap then ink, visible on white, grey and orange */
  --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A1628;

  /* Sizes */
  --rail: 72px;
  --topbar: 64px;
  --row: 56px;          /* comfortable list row, 44 is the hard minimum */
  --control: 40px;      /* buttons and inputs */
  --chip: 32px;
  --list-w: 360px;
  --panel-w: 320px;
  --drawer-w: 400px;
  --hour: 64px;         /* calendar hour height */
}