/* Design tokens: every colour, font, size, spacing and radius the app uses.
   Option E (27 Oct 2026, notes/from-claude.md "Restyle: what to build"):
   deep blue for headings, links, buttons and the thin top and bottom bars;
   orange used sparingly (see --orange); Newsreader for big headings and
   caterer names only, Inter Tight for everything else. Icons live in js/icons.js. */

:root {
  /* ---- palette ---- */
  --blue: #0B529A;          /* headings, links, buttons, the top and bottom bars */
  --orange: #E65510;        /* only: "aboard", "flying?", rating numbers, +7, "Cheers!", the start button, the saved heart */
  --ink: #0B1B2E;           /* text */
  --ink-2: #3F4752;         /* secondary text (cuisine and price line) */
  --muted: #5B6675;         /* small labels */
  --placeholder: #8A93A0;
  --line: #E4E1DA;
  --line-strong: #DCD8D0;   /* chips, score boxes, inputs */
  --tint: #F2ECE3;          /* where a photo will go */
  --tint-2: #EDE6DB;
  --chip-on: #EEF1FB;
  --white: #FFFFFF;
  --backdrop: rgba(11, 27, 46, .45);
  --shadow-float: 0 4px 14px rgba(11, 27, 46, .12);
  --shadow-phone: 0 1px 0 rgba(11, 27, 46, .06), 0 18px 50px rgba(11, 27, 46, .14);
  --warn: #8A3B12;
  --warn-bg: #FBE9DC;
  --warn-line: #E2B391;

  /* ---- type ---- */
  --font-serif: "Newsreader", "Times New Roman", serif;   /* headings and caterer names, 32px and up */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  /* the only sizes in use */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-code: 88px;          /* the airport code on its page */
  --lh: 1.4;
  --lh-head: 1.05;
  --fw-light: 300;          /* rating numbers */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  /* ---- spacing ---- */
  --gutter: 24px;           /* screen side margin */
  --gutter-tight: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- shape ---- */
  --r-btn: 4px;
  --r-box: 3px;
  --r-pill: 999px;
  --bar: 5px;               /* the thin blue bars */
  --btn-h: 54px;
  --nav-h: 66px;
  --w-screen: 440px;        /* the app column on a wide screen */

  /* ---- motion ---- */
  --t-screen: .22s;

  /* ---- the owner dashboard (styles/legacy.css) still uses these names ---- */
  --c-bg: var(--white);
  --c-surface: var(--white);
  --c-ink: var(--ink);
  --c-muted: var(--muted);
  --c-line: var(--line);
  --c-accent: var(--blue);
  --c-accent-ink: var(--blue);
  --c-on-accent: var(--white);
  --c-accent-soft: var(--chip-on);
  --c-note-bg: var(--tint);
  --c-member: var(--blue);
  --c-warn: var(--warn);
  --c-warn-bg: var(--warn-bg);
  --c-warn-line: var(--warn-line);
  --c-bar: var(--blue);
  --c-on-bar: var(--white);
  --c-bar-chip: var(--chip-on);
  --c-star: var(--orange);
  --c-star-off: var(--line);
  --c-backdrop: var(--backdrop);
  --shadow-sheet: 0 20px 60px rgba(8, 16, 60, .35);
  --font-body: var(--font-sans);
  --font-width-normal: 100;
  --font-width-wide: 100;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-code-legacy: 24px;
  --fs-hero: clamp(72px, 22vw, 148px);
  --lh-body: 1.55;
  --lh-tight: 1.2;
  --fw-bold: 700;
  --fw-heavy: 800;
  --sp-10: 40px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --bw: 1.5px;
  --w-page: 1180px;
  --w-rail: 320px;
  --w-text: 68ch;
  --icon-size: 18px;
  --icon-stroke: 1.8;

  /* ---- charts (validated with the dataviz palette checker, 4 Oct) ---- */
  --chart-1: #A8582A;       /* paid */
  --chart-2: #3E7CC4;       /* promo; searches line */
  --chart-3: #3A9A5E;       /* earned; caterer views line */
  --chart-4: #9B5FB5;       /* Purser */
  --chart-grid: #E4E1DA;
  --chart-surface: #FFFFFF;
}