/* Storybook design tokens: one set of sizes, corners, type, colours and shadows for every screen.
   Tokens only (custom properties): no element styles live here. This file loads before
   css/app.css, which keeps the base colours (--bg, --fg, --muted, --line, --chip, --accent,
   --send, --ok…), the safe areas and the motion curves.

   Older iPhones: every colour here is a plain hex or rgba value, never color-mix(), so
   iOS 15.0–16.1 can read them. (color-mix() with var() inside isn't understood there, and a
   fallback line before it doesn't help, because a value with var() is only checked later.)

   Pages that don't load this file (the dev test pages link app.css directly) still work where
   styles write var(--token, fallback). */

:root {
  /* spacing: a 4-point scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gutter: 16px;                 /* one side margin for every screen and sheet */

  /* corners: 6 sizes */
  --r-tile: 4px;                  /* grid tiles */
  --r-sm: 8px;                    /* small thumbnails, mini tiles */
  --r-md: 12px;                   /* icon squares, fields */
  --r-lg: 16px;                   /* cards, rows, buttons */
  --r-xl: 22px;                   /* sheets, big cards */
  --r-pill: 999px;                /* chips, pills, round buttons */

  /* type: 7 sizes (half-pixel sizes fold into the nearest) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-xs: 11px;                  /* badges, tile labels */
  --fs-sm: 13px;                  /* details, hints, chips */
  --fs-md: 15px;                  /* body text, list rows */
  --fs-input: 16px;               /* text fields: 16px stops the iPhone zooming in */
  --fs-lg: 17px;                  /* row titles, section headings */
  --fs-xl: 20px;                  /* sheet titles */
  --fs-2xl: 24px;                 /* screen titles */
  --fw-regular: 400;
  --fw-medium: 600;               /* details and small labels */
  --fw-bold: 700;                 /* buttons, names, row titles */
  --fw-heavy: 800;                /* only screen titles and big numbers */

  /* colours added to app.css's palette */
  --danger: #ff3b30;              /* record, badges */
  --me: #f23c57;                  /* "ME" in the chat */
  --bg-glass: rgba(255,255,255,.9);   /* sticky bars over a scrolling list (instead of color-mix) */
  --scrim: rgba(0,0,0,.45);       /* the shade behind a sheet */
  --on-photo-shadow: drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(0,0,0,.18));   /* white icons over a photo */
  --focus-ring: 0 0 0 3px rgba(14,173,255,.22);   /* a soft ring round a field you're typing in */

  /* elevation: two shadows */
  --shadow-1: 0 1px 4px rgba(0,0,0,.14);   /* small things floating on a page or a map */
  --shadow-2: 0 6px 24px rgba(0,0,0,.22);  /* cards and pop-ups over everything */

  /* controls */
  --tap: 44px;                    /* the smallest tap target */
  --btn-h: 50px;                  /* full-width buttons */
  --chip-h: 34px;                 /* chips and small pills */
  --field-h: 48px;                /* text fields */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-glass: rgba(13,13,15,.9);
    --focus-ring: 0 0 0 3px rgba(14,173,255,.32);
  }
}