/* ui/tokens.css — the design system's values (docs/roadmap/phase1-design-system.md §2): the only place a colour, size,
 * radius, shadow, focus or motion value is written. Custom properties on :root and nothing else — it styles no element
 * (tests/design-tokens.test.cjs holds it to that, and the design ratchet counts every literal outside it).
 *
 * Loaded first on every surface: the iPad (index.html, relative so it opens under file://; sw.js SHELL; package-app
 * FILES), the office (ops/web/index.html, /ui/tokens.css from SHARED_WEB_FILES) and the customer's pages (a <link> in
 * each). Each app's own names read them: the iPad's and the office's :root, the customer pages' <style> (stage D1) —
 * all but what a homeowner reads, signs or is shown, which keeps its own values until a paper day (styles.css).
 *
 * src/tokens.js holds the same values for what cannot read CSS (emails, a canvas): a test holds the two equal, value for
 * value, and every text/ground pair here to WCAG AA (4.5:1; control lines and focus 3:1).
 *
 * Brand primary (D1, JD 25 Oct): pine as the one action colour everywhere; sun orange an accent only (white on it is
 * 3:1). The brand layer (--ufw-brand, --ufw-on-brand, --ufw-brand-accent) is kept apart from the palette, so a company
 * that sells under its own name changes three lines (D15).
 *
 * Identity colours (appointment kinds, people, map pins) move here verbatim from ops.css and styles.css when the screens
 * that draw them move onto the components (stages E and G): the office's kinds and people since stage E6. */

:root {
  --ufw-pine-900: #0b2220;
  --ufw-pine-800: #12312f;
  --ufw-pine-700: #1f4e4c;
  --ufw-pine-600: #2c6b67;
  --ufw-pine-100: #dcebe8;
  --ufw-pine-50: #eef4f3;
  --ufw-sun-500: #e07b18;
  --ufw-sun-50: #fdf3e7;

  --ufw-ink: #11201e;
  --ufw-ink-2: #3d4e4a;
  --ufw-ink-3: #5f6f6b;
  --ufw-ground: #f3f6f2;
  --ufw-surface: #ffffff;
  --ufw-surface-2: #f7f9f8;
  --ufw-sunken: #eaefed;
  --ufw-rule: #d3dbd8;
  --ufw-rule-soft: #e6ebe9;
  --ufw-control-line: #869490;

  --ufw-ready: #1b6e55;
  --ufw-ready-wash: #e4f0ea;
  --ufw-waiting: #8a5d10;
  --ufw-waiting-wash: #f8f0e0;
  --ufw-blocked: #b3341f;
  --ufw-blocked-wash: #fbeeeb;
  --ufw-done: #56655f;
  --ufw-done-wash: #eceeec;

  /* The states darker, read outdoors at arm's length (the crew's phone, .ufw-glove). */
  --ufw-glove-ready: #174a3a;
  --ufw-glove-waiting: #5e3f0a;
  --ufw-glove-blocked: #85301f;

  /* Identity, not state: an appointment's kind on the office's calendar, and each person's own colour (twelve, in
     src/person-colors.js's order). Quiet hues, never the states' — moved verbatim from ops.css (stage E6). */
  --ufw-kind-consultation: #3b6c9e;
  --ufw-kind-remeasure: #6f5aa0;
  --ufw-kind-installation: #1f5c52;
  --ufw-kind-inspection: #56656c;
  --ufw-kind-event: #a4527b;
  --ufw-kind-service: #8a6d2b;
  --ufw-kind-final: #2f6f86;
  --ufw-kind-away: #8b9399;
  --ufw-kind-outside: #4a6fa5;
  --ufw-kind-jobdate: #6f7d3a;
  --ufw-person-0: #2563eb;
  --ufw-person-1: #16a34a;
  --ufw-person-2: #d97706;
  --ufw-person-3: #9333ea;
  --ufw-person-4: #0891b2;
  --ufw-person-5: #111827;
  --ufw-person-6: #db2777;
  --ufw-person-7: #65a30d;
  --ufw-person-8: #92400e;
  --ufw-person-9: #0f766e;
  --ufw-person-10: #64748b;
  --ufw-person-11: #1e40af;

  --ufw-brand: var(--ufw-pine-800);
  --ufw-on-brand: #ffffff;
  --ufw-brand-accent: var(--ufw-sun-500);

  --ufw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ufw-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* An unsigned paper's words (the presentation, Your price, the written quote): the contract's own face. */
  --ufw-font-paper: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ufw-text-xs: 11px;
  /* A pill's and a tag's words. */
  --ufw-text-label: 12px;
  --ufw-text-sm: 13px;
  --ufw-text-table: 14px;
  --ufw-text-md: 15px;
  --ufw-text-lg: 16px;
  /* The crew's phone: read outdoors, at arm's length (.ufw-glove). */
  --ufw-text-glove: 17px;
  --ufw-text-xl: 20px;
  --ufw-text-2xl: 24px;
  --ufw-text-figure: 30px;
  --ufw-text-display: 46px;
  --ufw-leading: 1.5;
  --ufw-leading-tight: 1.25;
  --ufw-label-spacing: .08em;

  --ufw-space-1: 4px;
  --ufw-space-2: 8px;
  --ufw-space-3: 12px;
  --ufw-space-4: 16px;
  --ufw-space-5: 20px;
  --ufw-space-6: 24px;
  --ufw-space-8: 32px;
  --ufw-space-12: 48px;

  --ufw-radius-control: 8px;
  --ufw-radius-card: 12px;
  --ufw-radius-pill: 999px;
  --ufw-radius-round: 50%;
  --ufw-shadow-card: 0 1px 2px rgba(17,32,30,.06);
  --ufw-shadow-raised: 0 1px 2px rgba(17,32,30,.07), 0 10px 24px -14px rgba(17,32,30,.30);
  --ufw-shadow-sheet: 0 24px 48px -16px rgba(17,32,30,.40);
  --ufw-backdrop: rgba(11,34,32,.50);

  --ufw-focus: #2c6b67;
  --ufw-focus-on-dark: #ffffff;
  --ufw-focus-width: 2px;
  --ufw-focus-offset: 2px;
  --ufw-target: 36px;
  --ufw-target-small: 32px;
  /* The crew's phone, in work gloves (.ufw-glove). */
  --ufw-target-glove: 52px;

  --ufw-motion-fast: 120ms;
  --ufw-motion: 200ms;
  --ufw-ease: cubic-bezier(.2,0,0,1);

  --ufw-z-bar: 40;
  --ufw-z-menu: 60;
  --ufw-z-sheet: 1000;
  --ufw-z-toast: 1100;
}

/* A finger, not a mouse: every target 44px (the iPad, the crew's phone, the office on an iPad). */
@media (pointer: coarse) {
  :root {
    --ufw-target: 44px;
    --ufw-target-small: 44px;
  }
}

/* Asked for less motion: none. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ufw-motion-fast: 0ms;
    --ufw-motion: 0ms;
  }
}