/* Design tokens: the only place colours, fonts, sizes and spacing are defined.
   Brand: More than Loft Ladders guidelines (Dec 2022).
   Contrast ratios are against white unless stated; AA needs 4.5 for body text, 3 for large. */

@font-face {
  font-family: "Tablet Gothic";
  src: url("../fonts/tablet-gothic-extrabold.af7566b2f36f.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tablet Gothic";
  src: url("../fonts/tablet-gothic-semibold.50bcad6ce7c2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.e2d056b61ab8.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic.44a6dbe5528b.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette (exact values from the guidelines) */
  --brand-lime: #bbd040;
  --brand-dark-grey: #5b5e5f;
  --brand-mid-grey: #88888d;
  --brand-light-grey: #dddddd;
  --brand-magenta: #e6007e;
  --brand-white: #ffffff;

  /* Derived shades */
  --lime-hover: #a9bd33;      /* ink on it: 6.6 */
  --lime-pressed: #97a92b;
  --lime-tint: #f3f7dc;
  --magenta-tint: #fde4f1;    /* job comments: they must stand out, as on the old system */
  --magenta-ink: #7a0043;     /* text on the magenta tint: 10.6 */       /* selected rows, active tab pill */
  --magenta-text: #c4006b;    /* magenta for small text and links: 5.9 */
  --grey-tint: #f4f4f4;       /* page background behind cards */

  /* Roles */
  --ink: #2b2d2e;             /* strongest text; also text on lime (8.1) */
  --text: var(--brand-dark-grey);   /* body text: 6.5 */
  --text-muted: #6b6e70;      /* secondary text: 5.1. Brand mid grey (3.5) is for borders/icons only */
  --text-on-dark: var(--brand-white);
  --surface: var(--brand-white);
  --surface-sunken: var(--grey-tint);
  --surface-dark: var(--brand-dark-grey);
  --border: var(--brand-light-grey);
  --border-strong: var(--brand-mid-grey);
  --primary: var(--brand-lime);
  --on-primary: var(--ink);   /* never white on lime: 1.7 */
  --accent: var(--brand-magenta);   /* highlights only, ~10% of any screen */
  --focus: var(--brand-magenta);

  /* Status */
  --ok: #1e6b3a;       --ok-tint: #e6f2ea;
  --warn: #8a5a00;     --warn-tint: #fdf3dc;
  --danger: #b3261e;   --danger-tint: #fbe9e8;

  /* Type: Tablet Gothic for headings and buttons, Source Sans 3 for everything else */
  --font-heading: "Tablet Gothic", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.9375rem;   /* 15 */
  --text-md: 1.0625rem;   /* 17: body. Readable in a van, and stops iOS zooming into inputs */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: 1.875rem;   /* 30 */
  --leading: 1.5;
  --leading-tight: 1.15;

  /* Space (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gutter: var(--space-4);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(43 45 46 / 0.08), 0 1px 1px rgb(43 45 46 / 0.04);
  --shadow-2: 0 6px 24px rgb(43 45 46 / 0.14);

  /* Sizes */
  --tap: 48px;                 /* minimum touch target */
  --header-h: 56px;
  --tabbar-h: 64px;
  --rail-w: 248px;
  --rail-w-collapsed: 76px;
  --content-max: 960px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 120ms;
  --normal: 200ms;
}

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