/*
 * iTeksi design tokens — canonical copy.
 * Source: docs/artifacts/design/iTeksi — Product design.html (19 screens).
 * Both apps copy this file VERBATIM to app/src/styles/tokens.css:
 *   console/v1 (rider + driver, mobile first) and owner/v1 (owner).
 * Views never use a raw hex, radius or font-family — only these variables.
 * A change starts here, then is copied to both apps in the same commit.
 */
:root {
  /* ── Ink: text on light, and the dark surface itself ── */
  --ink: #16160f;              /* primary text on light; driver + boarding-pass surface */
  --ink-raised: #26261c;       /* raised panel on a dark surface */
  --ink-line: #45453b;         /* 1–2px borders on a dark surface */

  /* ── Text ── */
  --text-muted: #5f5f55;       /* secondary text and eyebrows on white / sunken */
  --text-muted-on-yellow: #4a4a3f;
  --text-muted-on-dark: #b8b4a4;
  --text-soft-on-dark: #e8e5d8; /* body text on dark / green */
  --text-on-dark: #ffffff;
  --text-placeholder: #c9c5b4;

  /* ── Surfaces (light) ── */
  --paper: #ffffff;            /* default screen + card surface */
  --sunken: #f5f3ea;           /* inset rows, chips, walk legs, skeleton bars */
  --line: #dedacd;             /* the ONLY 1px border colour on light */

  /* ── Brand ── */
  --yellow: #ffd400;           /* primary action, splash, active state */
  --yellow-deep: #e5be00;      /* yellow text/accent on a dark surface */
  --yellow-tint: #fff8d1;      /* highlighted code/notice on light */
  --link: #17457a;
  --link-hover: #0e2f58;

  /* ── Status ── */
  --green: #06703c;            /* paid / success surface */
  --green-deep: #055c31;       /* raised panel on the green surface */
  --green-tint: #bfe8d2;       /* secondary text on green */

  /* ── Maps (rider 12, driver 16, owner 18) and on-dark detail ── */
  --map-ground: #edeadc;       /* light map land */
  --map-road: #e4e0d0;         /* roads on a light map */
  --map-road-on-dark: #3a3a2e; /* streets / tiles on a dark surface */
  --ink-faint: #6e6e5e;        /* low-contrast marks on dark (QR modules) */

  /* ── Flag stripes and taxi livery (logo only) ── */
  --stripe-gold: #ffc20e;
  --stripe-red: #e03c31;
  --stripe-blue: #00519e;
  --stripe-green: #007749;     /* the flag decal on the minibus */
  --stripe-amber: #f2ae1c;     /* the minibus's reflective belt stripe */

  /* ── Corners: one radius per element role ── */
  --r-bar: 3px;        /* progress bars, route end-stop square */
  --r-sm: 6px;         /* dots, swatches, skeleton/table bars */
  --r-tile: 12px;      /* 44px icon tiles / back buttons */
  --r-input: 14px;     /* text inputs and selects (56–58px tall) */
  --r-button: 16px;    /* buttons (60–68px) and list/leg cards */
  --r-card: 18px;      /* choice cards and feature cards */
  --r-panel: 20px;     /* dashboard panels, sheets, maps */
  --r-hero: 22px;      /* hero surfaces: boarding pass, wallet card, rank panel */
  --r-pill: 999px;     /* chips and segmented pills */

  /* ── Screen gutters (padding of the screen frame) ── */
  --gutter-splash: 28px;
  --gutter-onboarding: 24px;   /* sign-in, role choice, all sign-up screens */
  --gutter-rider: 20px;
  --gutter-driver: 18px;
  --gutter-owner-y: 36px;      /* owner desktop */
  --gutter-owner-x: 40px;

  /* ── Type ── */
  --font: Archivo, system-ui, sans-serif;
  --tracking-eyebrow: 0.08em;  /* 12px / 700 / UPPERCASE eyebrows */
  --tracking-tight: -0.02em;   /* 18–24px / 800 titles */
  --tracking-display: -0.03em; /* 34–62px / 800 display numbers */
  --tracking-hero: -0.05em;    /* 64px+ / 800 hero numbers and the wordmark */

  /* ── Controls ── */
  --h-input: 58px;
  --h-button: 60px;
  --h-button-hero: 68px;       /* the one primary action at the bottom of a screen */
  --h-driver-target: 64px;     /* minimum driver tap target; the capacity control is 84px */
}