/* Design tokens. Loaded first; every later file reads from here.
   Breakpoints used across the stylesheets (no custom property can drive a media query,
   so they are documented here and written literally where they are used):
     min-width: 1500px  wide desktop — taller stage
     max-width:  900px  tablet and below — larger type, 44px touch targets
     max-width:  600px  phone — single column, stacked stage controls
     max-width:  374px  very narrow phone — one service card per row */
:root {
  /* Surfaces and text */
  --paper: #f7f6f2;
  --ink: #252d29;
  --ink-soft: #626b59;
  --moss: #59654f;
  --muted: #74796e;
  --line: #dddfd6;
  --line-stage: #d9ded3;

  /* Accents */
  --orange: #ed792e;
  --rust: #b95417;
  --focus: #cd5a14;

  /* Component colours reused in more than one rule */
  --skeleton: #d5ddca;
  --strip-divider: #ffffff24;

  /* Font stacks. Only used where font-family is set on its own; the `font:`
     shorthands keep their literal stack so an undefined var can never void them. */
  --font-thai: ShopThai, Arial, sans-serif;
  --font-ui: Arial, sans-serif;
}