/* Design tokens: every color, type style, shape, spacing and elevation value the app and its public pages use.
   Change a value here and it changes everywhere. Nothing else in the code should name a raw color or a raw
   spacing value when a token below says the same thing (dev/style-check.js counts the ones that still do).

   Names follow Material Design 3: color roles (--m-primary, --m-on-surface, ...), the type scale (--t-*), the
   shape scale (--m-radius-*), and the spacing scale on M3's 4dp grid (--space-*). The product's own ink
   (--ink) and backdrop are set again at start-up for each product (Groundskeeping, Floorkeeping), so the
   values here are the Groundskeeping defaults. Guide: docs/DESIGN-SYSTEM.md. */
:root {
  /* ---- brand and app surfaces ---- */
  --ink: #173d52; /* the product color; Floorkeeping sets its own at start-up */
  --backdrop: #2b3a44; /* behind the map and photos */
  --plate: #d9d9d9;
  --icon: #e3e3e3;
  --paper: #ffffff;
  --danger: #8c2f2f;

  /* ---- M3 color roles ---- */
  --m-primary: #173d52;
  --m-on-primary: #ffffff;
  --m-primary-container: #d6e4f0;
  --m-on-primary-container: var(--ink);
  --m-inverse-primary: #9ccbe8;
  --m-secondary: #4f6354;
  --m-secondary-container: #d3e3ec;
  --m-on-secondary-container: #0f2a3a;
  --m-tertiary: #ffb870;
  --m-error: #b3261e;
  --m-on-error: #ffffff;
  --m-error-container: #ffdad6;
  --m-on-error-container: #410002;
  --m-surface: #f5f5f5;
  --m-on-surface: #1c1c1c;
  --m-surface-variant: #e1e3e1;
  --m-on-surface-variant: #46484b;
  --m-surface-lowest: #ffffff;
  --m-surface-container-low: #f2f4f5;
  --m-surface-container: #eceef0;
  --m-surface-high: #e8e8e8;
  --m-surface-highest: #e1e1e1;
  --m-outline: #79747e;
  --m-outline-variant: #c4c7c5;
  --m-inverse-surface: #322f35;
  --m-inverse-on-surface: #f5eff7;
  --m-focus: var(--m-primary);
  --m-scrim: rgba(0, 0, 0, 0.32);
  /* state layers (M3): the on-color at these opacities */
  --m-state-hover: 0.08;
  --m-state-focus: 0.1;
  --m-state-pressed: 0.1;
  --m-state-drag: 0.16;

  /* ---- shape ---- */
  --m-radius-xs: 4px;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-radius-xl: 28px;
  --m-radius-full: 999px;

  /* ---- type (M3 type scale) ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t-display-sm: 400 36px/44px var(--font);
  --t-headline-md: 400 28px/36px var(--font);
  --t-headline-sm: 400 24px/32px var(--font);
  --t-title-lg: 400 22px/28px var(--font);
  --t-title-md: 500 16px/24px var(--font);
  --t-title-sm: 500 14px/20px var(--font);
  --t-body-lg: 400 16px/24px var(--font);
  --t-body-md: 400 14px/20px var(--font);
  --t-body-sm: 400 12px/16px var(--font);
  --t-label-lg: 500 14px/20px var(--font);
  --t-label-md: 500 12px/16px var(--font);
  --t-label-sm: 500 11px/16px var(--font);

  /* ---- spacing (M3's 4dp grid) ---- */
  --space-1: 4px; /* a field and its supporting text */
  --space-2: 8px; /* a label and what it labels; buttons side by side; chips */
  --space-3: 12px; /* help text and the controls around it */
  --space-4: 16px; /* between components in a sheet or dialog (the default) */
  --space-5: 20px;
  --space-6: 24px; /* between sections; above a dialog's actions; sheet and dialog padding */
  --space-8: 32px;
  --space-10: 40px;
  /* an outlined text field's label floats this far above the field's box, so a gap above a field adds it */
  --field-label-overhang: 8px;
  --touch-target: 48px; /* M3 minimum touch target */

  /* ---- elevation (M3 levels) ---- */
  --m-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --m-elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --m-elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);

  /* ---- motion ---- */
  --m-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --m-dur-short: 0.15s;
  --m-dur-medium: 0.25s;

  /* ---- device ---- */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}