/*
 * Design tokens. Every colour, size and layer used by the app is defined here,
 * so the rest of the CSS never hard-codes values.
 */
:root {
  /* Surfaces and text */
  /* A warm paper tone rather than flat grey, to suit an app about old stone and print. */
  --color-bg: #f5f3ee;
  --color-surface: #ffffff;
  --color-surface-muted: #efece5;
  --color-border: #e5e1d8;
  --color-text: #16181d;
  --color-text-muted: #5b5e66;
  --color-text-on-accent: #ffffff;

  /* One accent: the red of the City of London's arms */
  --color-accent: #c8102e;
  --color-accent-hover: #a50d26;
  --color-accent-soft: #fbe8eb;
  /* A gentle top-lit gradient for the main buttons. Both ends keep 4.5:1 under white text. */
  --color-accent-gradient: linear-gradient(180deg, #d61a39 0%, #b90d2a 100%);
  --shadow-accent: 0 1px 2px rgb(140 10 30 / 0.25), 0 8px 20px rgb(200 16 46 / 0.3);
  /* Secondary buttons: a translucent tint, so they sit well on white, paper or glass. */
  --color-button-bg: rgb(22 24 29 / 0.06);
  --color-button-bg-active: rgb(22 24 29 / 0.11);
  --color-focus: #0b57d0;

  /* Dark enough for 4.5:1 text on --color-success-soft as well as on white. */
  --color-success: #2a772e;
  --color-success-soft: #e8f3e9;

  /* "What to look for": a warm callout, so it's easy to find again while standing on site. */
  --color-callout-bg: #fbf1d6;
  --color-callout-border: #ecd9a4;
  --color-callout-icon: #8a6100;

  /* Bars that content scrolls under (the history page's top and bottom bars). */
  --color-bar-bg: rgb(245 243 238 / 0.88);
  --color-bar-border: rgb(0 0 0 / 0.07);

  /*
   * Frosted glass, as iOS draws its own bars: the map shows through the controls floating
   * over it. The hairline keeps the edge crisp over light parts of the map.
   */
  --glass-bg: rgb(255 255 255 / 0.78);
  --glass-bg-strong: rgb(255 255 255 / 0.9);
  --glass-filter: saturate(1.8) blur(20px);
  --glass-hairline: 0 0 0 0.5px rgb(0 0 0 / 0.08);

  /* The user's location: the usual "you are here" blue, so it can't be mistaken for a place. */
  --color-location: #1a73e8;
  --color-location-halo: rgb(26 115 232 / 0.25);
  --color-location-accuracy: rgb(26 115 232 / 0.1);

  /*
   * Map. OpenStreetMap's tiles are bright and busy, so they're muted to keep the
   * look calm and let the category-coloured pins stand out. Outside the City gets
   * a soft shade, and the boundary an accent outline.
   */
  --map-tile-filter: grayscale(0.8) sepia(0.06) contrast(0.86) brightness(1.1);
  --map-control-bg: rgb(255 255 255 / 0.85);
  --map-outside-shade: rgb(22 24 29 / 0.16);
  --map-boundary-color: var(--color-accent);
  --map-boundary-opacity: 0.85;
  --map-boundary-width: 2.5px;

  /*
   * Category colours, used for pins and labels. All reach at least 4.5:1
   * against white, so white glyphs and text on them stay readable, and they
   * stand out against the muted map tiles. Hues are spread apart so they can
   * be told apart, but later tickets also pair each with an icon and label,
   * so nothing relies on colour alone.
   */
  --cat-roads: #4f5b66;
  --cat-pubs: #a85400;
  --cat-monuments: #6a3fa0;
  --cat-artefacts: #ad1457;
  --cat-buildings: #1565c0;
  --cat-churches: #2e7d32;
  --cat-ancient: #7b5e3b;
  --cat-plaques: #00796b;

  /* Place pins: the visible dot. The tap area around it is always --tap-target. */
  --pin-dot-size: 30px;
  --pin-glyph-size: 16px;
  --pin-border-width: 2.5px;
  /* Seen pins fade back but keep a hint of their colour, and gain a tick. */
  --pin-seen-filter: saturate(0.3) brightness(1.25);
  --pin-seen-opacity: 0.8;
  --pin-tick-size: 14px;
  --pin-tick-glyph-size: 10px;
  --pin-selected-scale: 1.25;
  --user-dot-size: 16px;

  /*
   * Street lines (drawn on a canvas, so js/map.js reads these). Unseen streets are in the
   * roads colour, thinner and softer than the pins, which stay the focus. Seen streets turn
   * the green of progress, so the City fills in as they're ticked off (S1). The open street
   * is in the accent red, with a white halo to lift it off the streets it crosses. Widths
   * are in pixels when zoomed in; map.js thins them when zoomed out.
   */
  --street-unseen-color: var(--cat-roads);
  --street-unseen-width: 4px;
  --street-unseen-opacity: 0.75;
  --street-seen-color: var(--color-progress);
  --street-seen-width: 4px;
  --street-seen-opacity: 0.7;
  --street-selected-color: var(--color-accent);
  --street-selected-width: 6px;
  --street-selected-opacity: 1;
  --street-halo-color: #ffffff;
  --street-halo-width: 2.5px;

  /*
   * The pills at the top left of the map: the app's name, and the progress pill under it
   * that opens the list. The progress pill's tap area reaches beyond it to --tap-target.
   */
  --map-pill-height: 2.25rem;
  --progress-ring-size: 1.25rem;
  --progress-bar-height: 0.5rem;
  --progress-bar-height-small: 0.3125rem;
  --color-progress: var(--color-success);
  --color-progress-track: var(--color-border);
  /* The category glyph at the start of each row in the list. */
  --list-glyph-size: 2rem;

  /*
   * Chat ("Ask about this place"). The user's messages sit in tinted bubbles on the right;
   * answers read like the history text, full width with no bubble.
   */
  --color-chat-user-bg: var(--color-accent-soft);
  --color-chat-user-text: var(--color-text);
  --color-input-bg: var(--color-surface);
  --color-input-border: var(--color-border);
  --color-error: var(--color-accent-hover);
  --color-error-soft: var(--color-accent-soft);
  /* The question box grows with its text up to about five lines, then scrolls. */
  --composer-max-height: 8.5rem;
  --thinking-dot-size: 0.375rem;

  /* Bottom sheet (place card). Wider screens get a centred sheet, not a full-width one. */
  --sheet-max-width: 30rem;
  /* The history page's column, so lines stay a comfortable length on wider screens. */
  --page-max-width: 40rem;
  --photo-aspect-ratio: 3 / 2;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /*
   * Display face for titles. ui-serif is New York on iPhone; the rest are fallbacks with
   * a similar sturdy, bookish feel. It's only for headings, so body text stays in the UI face.
   */
  --font-display: ui-serif, "New York", Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --letter-spacing-display: -0.01em;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.375rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 650;
  --line-height-tight: 1.2;
  --line-height-body: 1.5;
  /* Long-form reading (the history text): a little larger and airier than the UI text. */
  --font-size-reading: 1.0625rem;
  --font-size-standfirst: 1.1875rem;
  --line-height-reading: 1.6;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /*
   * Icons. Line icons sit beside text at sm to lg; the larger sizes are for the round
   * buttons and badges. --icon-circle-size is the grey circle drawn behind a close ×.
   */
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 18px;
  --icon-size-lg: 20px;
  --icon-size-xl: 22px;
  --icon-size-2xl: 24px;
  --icon-size-badge: 30px;
  --icon-circle-size: 30px;
  --icon-circle-size-small: 26px;

  /* Apple's minimum comfortable tap target */
  --tap-target: 44px;
  /* The main action (Surprise me) gets a bigger target than the rest. */
  --button-large-height: 3.5rem;
  /* The filter sheet's category ticks, and the dot on the Filter button when one is on. */
  --checkbox-size: 1.5rem;
  --filter-dot-size: 0.75rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  /* Layered: a tight shadow for the edge and a wide soft one for the lift. */
  --shadow-sm: 0 1px 2px rgb(22 24 29 / 0.05), 0 2px 8px rgb(22 24 29 / 0.04);
  --shadow-md: 0 1px 3px rgb(22 24 29 / 0.08), 0 6px 18px rgb(22 24 29 / 0.1);
  --shadow-lg: 0 2px 6px rgb(22 24 29 / 0.08), 0 16px 40px rgb(22 24 29 / 0.18);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  /* One cycle of the chat's "Thinking…" dots. */
  --duration-thinking: 1.2s;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* iOS's own sheet curve: a quick start that settles gently, with no overshoot to open a gap under the sheet. */
  --easing-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layers. Leaflet's own panes use z-index up to 1000, so app chrome sits above. */
  --z-map: 0;
  --z-overlay: 1100;
  --z-sheet: 1200;
  --z-toast: 1300;

  /* Safe areas, so the notch and home indicator never cover content */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}