/*
 * Talk to Quote design tokens. The one source for colour, type, space, radius and
 * motion, in both themes. The prototype (prototype/) is built on this file; the
 * app's build lane adopts it as is.
 *
 * Contrast is checked by script, never by eye:
 *   node 06-builds/design/tools/contrast.mjs --tokens 06-builds/design/tokens.css --pairs 06-builds/design/tokens.pairs.json
 *
 * Light is :root. Dark is [data-theme="dark"], which the app sets from the phone's
 * appearance (Apple's rule) or from the person's choice in Settings.
 */
:root {
  /* Type: the system font, Apple's ramp. Body text is never under 17px; nothing a person must read is under 13px. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --text-large: 34px;   /* large title, 700 */
  --text-title1: 28px;  /* a job's name, a step's title, 700 */
  --text-title2: 22px;  /* a key statement, 600 */
  --text-title3: 20px;  /* section headers, 700 */
  --text-body: 17px;    /* everything a person reads or types, 400 or 600 */
  --text-sub: 15px;     /* the second line of a row, 400 */
  --text-foot: 13px;    /* notes under a group, 400 */
  --text-cap1: 12px;    /* labels under the job's quick actions, 500 */
  --text-cap2: 11px;    /* tab bar labels, 600 */
  --fig-hero: 44px;     /* the ballpark, and the Talk timer; rounded figures */
  --fig-1: 34px;        /* the estimate's range */
  --fig-2: 30px;        /* the range on a job's estimate card */
  --fig-3: 26px;        /* the range on the smallest phones; live words on Talk */

  /* Space: a 4px grid. Groups sit 16px from the edge; their headers and notes 20px. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* Radius */
  --radius-s: 8px;      /* icon tiles, segmented buttons */
  --radius-m: 12px;     /* quick-action tiles */
  --radius-l: 14px;     /* grouped lists, sheets */
  --radius-pill: 999px; /* buttons, search, tab bar */

  /* Target: nothing a thumb must hit is smaller than this. */
  --target: 44px;

  /* Icons: Lucide, drawn at Apple's finer weight. */
  --icon-stroke: 1.75;

  /* Motion: 250ms or less; reduced motion turns every movement into a cut. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 180ms;
  --dur: 250ms;

  /* Colour, light (DEC-084): Mist ground, white cards, the Aphotine teal for actions. Grouped
     like Apple's apps; green only for what is his, amber only for what is not confirmed.
     --tint is text and icons; --tint-fill is a solid control with --tint-ink on it. */
  --bg: #eef2f1;               /* Mist */
  --cell: #ffffff;
  --raised: #ffffff;
  --fill: rgba(70, 100, 95, 0.1);
  --fill-2: rgba(70, 100, 95, 0.18);
  --label: #12191a;
  --label-2: #56625f;          /* 6.4:1 on a card, 5.6:1 on the ground */
  --label-3: #8a9693;          /* chevrons and empty rings only, never text */
  --sep: rgba(30, 60, 55, 0.16);
  --tint: #33706c;             /* links and icons: 5.7:1 on a card, 5.1:1 on the ground */
  --tint-fill: #012520;        /* Aphotine buttons (Caleb, 2026-10-01, over Deep Teal): white on it 16:1 */
  --tint-ink: #ffffff;
  --tint-soft: rgba(51, 112, 108, 0.1);
  --amber: #843c00;            /* the * and "Assumed": 7:1 or better */
  --amber-bar: #c77700;        /* rings and bars for estimates, not text */
  --mine: #1a7b39;             /* his rates, his confirmed answers: 4.7:1 on Mist (DEC-084 darkened it from #1b7f3b) */
  --red: #d70015;              /* recording, destructive, and stop (DEC-060) */
  --mono-a: #687673;           /* initials circles */
  --mono-b: #4c5856;
  --on-mono: #ffffff;
  --bar: rgba(255, 255, 255, 0.85);
  --bar-edge: rgba(1, 37, 32, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --toast: rgba(28, 28, 30, 0.92);
  --on-toast: #ffffff;
  /* Stop light (DEC-060): soft fills under red, amber and green words; solid fills under white words on swipe actions. */
  --red-soft: #fdecee;
  --amber-soft: #fdf0dc;
  --mine-soft: #edf7f0;
  --red-fill: #d70015;
  --amber-fill: #9c4800;
  --mine-fill: #1a7b39;
  --gray-fill: #6e6e73;
  --on-fill: #ffffff;
  color-scheme: light;
}

[data-theme="dark"] {
  /* Colour, dark (DEC-084): Deep green, a charcoal tinted toward Aphotine; Teal for every action. */
  --bg: #101615;               /* Deep green */
  --cell: #1a2321;
  --raised: #232e2c;
  --fill: rgba(120, 150, 145, 0.18);
  --fill-2: rgba(120, 150, 145, 0.28);
  --label: #eef7f6;            /* Mist */
  --label-2: #a5b8b4;          /* 7.7:1 on a card */
  --label-3: #74827f;
  --sep: rgba(165, 184, 180, 0.24);
  --tint: #63b9b5;             /* Teal: 7.0:1 on a card */
  --tint-fill: #63b9b5;
  --tint-ink: #012520;         /* Aphotine on Teal: 7.1:1 */
  --tint-soft: rgba(99, 185, 181, 0.16);
  --amber: #ffb340;
  --amber-bar: #ffb340;
  --mine: #4cd964;
  --red: #ff6961;
  --mono-a: #5c6b68;
  --mono-b: #41504d;
  --on-mono: #ffffff;
  --bar: rgba(26, 35, 33, 0.85);
  --bar-edge: rgba(220, 240, 236, 0.1);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --toast: rgba(35, 46, 44, 0.95);
  --on-toast: #ffffff;
  --red-soft: #3b1a1b;
  --amber-soft: #3a2a10;
  --mine-soft: #15321c;
  --red-fill: #c9101f;
  --amber-fill: #9c4800;
  --mine-fill: #1d7a38;
  --gray-fill: #5a5a5f;
  --on-fill: #ffffff;
  color-scheme: dark;
}