/*
 * Geymsla design tokens.
 *
 * PRD section 3 is acceptance criteria, not styling advice: "A functionally complete
 * build with small text and cramped controls does not meet the requirement." The
 * numbers below are therefore the specification, and every component sizes itself from
 * these variables rather than from hand-picked values.
 *
 * Conditions being designed for: a phone in portrait, held outdoors in an Icelandic
 * winter, in daylight glare or the dark, by someone wearing gloves.
 */

:root {
  /* ---- Type scale -------------------------------------------------------------
   * 18px is the FLOOR for body text, not the target. Values the operator reads at
   * arm's length — the licence plate above all — are much larger.
   */
  --gy-text-sm: 1rem;        /* 16px — only for genuinely secondary metadata */
  --gy-text-base: 1.125rem;  /* 18px — minimum body text */
  --gy-text-lg: 1.375rem;    /* 22px — field labels, card secondary lines */
  --gy-text-xl: 1.75rem;     /* 28px — prices, section headings */
  --gy-text-2xl: 2.25rem;    /* 36px — licence plate on a list card */
  --gy-text-3xl: 2.75rem;    /* 44px — licence plate on the vehicle record */

  --gy-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --gy-line: 1.5;
  --gy-weight-normal: 400;
  --gy-weight-medium: 600;
  --gy-weight-bold: 700;

  /* ---- Touch targets ----------------------------------------------------------
   * 48px minimum in both directions, with generous gaps. The gap matters as much as
   * the target: a gloved thumb that can reach two controls at once will eventually
   * hit the wrong one, and "mark paid" is next to nothing forgiving.
   */
  --gy-touch-min: 48px;
  --gy-touch-comfortable: 56px;
  --gy-touch-primary: 64px;  /* the register-a-vehicle button */
  --gy-touch-gap: 12px;      /* minimum space between adjacent tappable things */

  /* ---- Spacing ---------------------------------------------------------------- */
  --gy-space-1: 4px;
  --gy-space-2: 8px;
  --gy-space-3: 12px;
  --gy-space-4: 16px;
  --gy-space-5: 24px;
  --gy-space-6: 32px;
  --gy-space-7: 48px;

  /* ---- Colour -----------------------------------------------------------------
   * Dark text on a light ground, no grey-on-grey. Every pairing used for text is at
   * or above WCAG AA against its background; the greys below are deliberately dark
   * enough to survive glare, which rules out the usual #999 "muted" text.
   */
  --gy-ink: #14181c;          /* body text — 14.9:1 on --gy-surface */
  --gy-ink-soft: #454f59;     /* secondary text — 8.0:1, still comfortably AA */
  --gy-surface: #ffffff;
  --gy-surface-sunken: #f2f4f6;
  --gy-border: #b9c1c9;       /* visible in glare, unlike a hairline #eee */
  --gy-border-strong: #6b7681;

  --gy-brand: #17512f;        /* deep green — 9.4:1 with white text */
  --gy-brand-ink: #ffffff;
  --gy-brand-soft: #e6f0ea;

  /* Paid / unpaid. Never signalled by colour alone — PRD 4.4 requires colour AND
   * text or an icon, which also covers the colour-blind operator and the washed-out
   * screen in direct sun. */
  --gy-paid: #17512f;
  --gy-paid-soft: #e2efe7;
  --gy-unpaid: #9a2a19;       /* 6.4:1 with white text */
  --gy-unpaid-soft: #fbe8e4;

  --gy-warning: #7a4a02;      /* warnings the operator may proceed past */
  --gy-warning-soft: #fdf1dc;
  --gy-error: #9a2a19;        /* genuine blocks */
  --gy-error-soft: #fbe8e4;

  --gy-focus: #0b5cd5;        /* focus ring — must be obvious, not subtle */

  /* ---- Shape and depth -------------------------------------------------------- */
  --gy-radius: 10px;
  --gy-radius-lg: 16px;
  --gy-border-width: 2px;     /* 1px borders disappear outdoors */
  --gy-shadow-card: 0 1px 3px rgb(20 24 28 / 12%);
  --gy-focus-ring: 0 0 0 4px rgb(11 92 213 / 35%);

  /* ---- Layout ----------------------------------------------------------------- */
  --gy-content-max: 720px;    /* desktop is a widened phone layout, not a new design */
}

/*
 * Deliberately no prefers-color-scheme dark theme. PRD 3.3 asks for one high-contrast
 * scheme readable in daylight glare; a dark theme that inverts these tokens would need
 * its own contrast validation and its own field testing, and is not what was asked for.
 */