/* ws-tokens.css — the single source of truth for type and colour.
 * ═══════════════════════════════════════════════════════════════════
 * Every page links this BEFORE ws-ui.css and before its own <style>, so a
 * page can still override a token locally but nothing has to redeclare the
 * set. The values are the Garver360 Tracker app's (constants/colors.ts,
 * light) — the phone app WorldSensor's own app follows — so the site and the
 * app read as one product: GVR Red as the accent, the same neutrals, Inter for
 * everything, the app's radius scale.
 *
 * Brand source of truth: Garver Brand Standards, June 2025 (GVR Red is the
 * only red for chrome). See docs/DESIGN.md for how these are applied.
 */

/* ── Typeface (self-hosted) ──────────────────────────────────────────
 * One family, the app's: Inter, a variable file covering 400–700 (Regular,
 * Medium, SemiBold, Bold — exactly the four weights the app loads). Latin
 * subset only; the product is English-only. Self-hosted because the CSP only
 * allows same-origin fonts. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2-variations"),
       url("/fonts/inter-var.woff2") format("woff2");
  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 {
  /* ── Brand ──────────────────────────────────────────────────────
   * GVR Red is the only red in branded material, and an accent rather than a
   * field: primary buttons, the active tab, selection, the moving plan. */
  --gvr-red: #782F40;
  --gvr-red-2: #A23F56;            /* Brand Accent 2 — the app's dark-theme red */

  --accent: var(--gvr-red);
  --accent-ink: #5f2533;           /* the accent as hover / pressed text */
  --accent-tint: color-mix(in srgb, var(--accent) 12%, white);   /* the app's `primary20` */
  --accent-tint-2: color-mix(in srgb, var(--accent) 18%, white); /* `primary25` — selected steppers */
  --accent-tint-3: color-mix(in srgb, var(--accent) 34%, white); /* `primary55` — a switch's track */

  /* The brand grey ramp — rules and icons. */
  --grey-20: #CCCCCC;
  --grey-40: #999999;
  --grey-60: #666666;
  --grey-80: #333333;

  /* ── Surfaces (the app's light palette, verbatim) ───────────────── */
  --bg: #f5f6f8;                   /* background */
  --surface: #ffffff;              /* card */
  --surface-2: #fbfcfd;            /* a step off white for table heads and sub-rows */
  --surface-3: #f2f4f6;            /* image wells */
  --secondary: #eef1f5;            /* secondary / muted: icon tiles, quiet buttons, switch tracks */
  --border: #e7e9ee;               /* border — the hairline on rows and groups */
  --border-strong: #d5dae1;        /* inputBorder */
  --text: #1a2230;                 /* foreground */
  --text-muted: #66707d;           /* mutedForeground — 5.0:1 on white, 4.6:1 on --bg */
  --text-faint: #55606d;           /* the tab bar's inactive label — 6.0:1, for 11px type */
  --slate: #586675;                /* the app's `accent`: a neutral for campus markers and pills */
  --slate-tint: var(--secondary);

  /* ── Semantic (the Garver360 system's, as the app carries them) ──── */
  --green: #1f9d57;  --green-tint: #e7f6ee;
  --amber: #b06f12;  --amber-tint: #fbf1df;
  --red:   #d23f3f;  --red-tint:   #fdeaea;   /* destructive */
  --blue:  #2b6cb0;  --blue-tint:  #e8f0fb;   /* track — the drive in progress */
  /* Text-safe variants: use these wherever a status colour is applied to type. */
  --green-ink: #136f36;
  --amber-ink: #8a5510;
  --red-ink:   #b32525;
  --blue-ink:  #1f4f85;

  /* ── Map / plan surfaces ────────────────────────────────────────── */
  --map-bg: #e9ecef;
  --map-surface: #ffffff;
  --map-surface-2: #f2f4f6;
  --map-border: #d5dae1;
  --map-text: #1a2230;

  /* ── Overlay surfaces (floating over imagery or a plan) ─────────────
   * The app's HUD panels: near-opaque white (`#ffffffF2`), a solid hairline,
   * a real shadow. No dark boxes. */
  --overlay-surface: rgba(255, 255, 255, .95);
  --overlay-surface-strong: rgba(255, 255, 255, .975);
  --overlay-border: #d5dae1;
  --overlay-shadow: 0 2px 10px rgba(16, 24, 40, .16);
  --overlay-green-tint: rgba(214, 240, 225, .95);
  --overlay-green-tint-2: rgba(197, 232, 212, .96);

  /* ── The tab bar (phones) ───────────────────────────────────────────
   * Its labels are 11px over a translucent bar, so they get their own, higher
   * contrast pair rather than the body text colours. */
  --tab-bar: #ffffff;
  --tab-active: var(--accent);
  --tab-inactive: #55606d;
  --tab-scrim: rgba(255, 255, 255, .8);

  /* The photo stage (a photograph or a 360° full-screen) is the one place the
   * ground is dark: it is the image's ground, not the page's. */
  --stage-bg: #0b0e13;
  --stage-text: #f2f4f7;
  --accent-on-dark: #cc7b8e;
  --accent-on-dark-ink: #08101c;
  --green-on-dark: #49d17a;
  --amber-on-dark: #ffb340;
  --red-on-dark: #ff5f56;

  /* ── Geometry (the app's radius scale) ──────────────────────────────
   * 10 is the system radius (the app's `colors.radius`); 14 is a field or a
   * primary button; 16 a group of rows; 18 a card; 20 a panel floating over
   * the map. Nothing is squarer than 8. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 6px 24px rgba(16, 24, 40, .09);

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);       /* one family; kept so older rules resolve */
  /* No --font-mono: numerals line up with font-variant-numeric instead. */

  --size-screen: 1.75rem;      /* 28 — a screen's title (the app's screenTitle) */
  --size-display: 1.75rem;     /* alias */
  --size-stat: 1.75rem;        /* alias */
  --size-title: 1.375rem;      /* 22 — a page title on a desk */
  --size-subhead: 1.0625rem;   /* 17 — a card heading */
  --size-input: 1rem;          /* 16 — fields and primary buttons, and the size iOS will not zoom */
  --size-row: 0.9375rem;       /* 15 — a row's label (rowLabel) */
  --size-body: 0.875rem;       /* 14 — running text and table cells */
  --size-small: 0.8125rem;     /* 13 — pill text, secondary buttons */
  --size-caption: 0.75rem;     /* 12 — a row's subtitle, metadata */
  --size-micro: 0.6875rem;     /* 11 — section headers, tab labels, field labels */
  --size-kicker: 0.625rem;     /* 10 — metric labels */

  --weight-display: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-body: 400;
  --weight-light: 400;         /* the app has no light weight; alias so nothing thins */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);   /* the app's Easing.out(cubic) */
  --dur: 180ms;
  --dur-panel: 320ms;

  /* ── Walk colours ─────────────────────────────────────────────────
   * Data colour is a separate channel from chrome colour: one hue per walk on
   * a floor, keyed on the walk's id (not list position) so it never changes
   * under someone. Colour-blind-safe ordering; the accent is not in it. */
  --walk-1: #2b6cb0;
  --walk-2: #1f9d57;
  --walk-3: #b06f12;
  --walk-4: #7c3aed;
  --walk-5: #0e7490;
  --walk-6: #c2410c;
  --walk-7: #4d7c0f;
  --walk-8: #be185d;
}

/* ── Base type ─────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, .ws-display {
  font-family: var(--font-body);
  font-weight: var(--weight-display);
  letter-spacing: -.01em;
}

/* The app's section header: 11px Inter Medium, uppercase, tracked 0.8px,
 * muted, sitting above a group of rows with more space above than below. */
.ws-section, .ws-kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--size-micro);
  letter-spacing: .073em;          /* 0.8px at 11px */
  text-transform: uppercase;
  color: var(--text-muted);
}