/* ============================================================
   Design tokens — STRUCTURE ONLY.

   The values below are neutral fallbacks so the page still renders
   if theme.css fails to load. The real palette and typefaces are
   GENERATED into css/theme.css from the site's own config, sampled
   from that business's photographs and logo. Never put a business's
   colour, face or filename in this file.

   Theme rule: the complete light palette is defined on bare :root.
   Dark redefines TOKENS ONLY, twice — once behind prefers-color-scheme
   (guarded so an explicit light choice wins) and once behind the
   [data-theme="dark"] stamp. No component ever declares a colour
   inside a media block.
   ============================================================ */

:root {
  /* ---- ground & surface ---- */
  --ground:        #EDF3F6;
  --ground-sunk:   #E2EBF0;
  --surface:       #FFFFFF;
  --surface-2:     #F4F8FA;

  /* ---- ink ---- */
  --ink:           #1F1B1A;
  --ink-2:         #55504D;
  --ink-3:         #7E7874;

  --rule:          #D3DEE4;
  --rule-strong:   #B4C4CD;

  /* ---- accent: --accent is the brand value, --accent-ink the
       darkened variant that clears 4.5:1 on the light ground ---- */
  --accent:        #F27F2B;
  --accent-ink:    #B4560D;
  --accent-wash:   #FCEADB;

  /* ---- semantic (state, never decoration) --------------------- */
  --open:          #1F5628;
  --open-wash:     #E2EFE4;
  --shut:          #7D262C;
  --shut-wash:     #F6E6E7;

  /* ---- type -------------------------------------------------- */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.05rem);
  --step-3:  clamp(1.90rem, 1.58rem + 1.60vw, 2.95rem);
  --step-4:  clamp(2.40rem, 1.80rem + 3.00vw, 4.30rem);

  /* ---- space (one scale, used through gap — never ad-hoc margins) */
  --s-1: 0.35rem;
  --s-2: 0.7rem;
  --s-3: 1.1rem;
  --s-4: 1.7rem;
  --s-5: 2.6rem;
  --s-6: 4.0rem;
  --s-7: 6.0rem;

  --radius:    3px;
  --radius-lg: 6px;
  --measure:   62ch;
  --shell:     min(100% - 2.2rem, 68rem);

  --shadow:    0 1px 2px rgb(31 27 26 / 8%), 0 10px 28px -18px rgb(31 27 26 / 35%);
  --shadow-lg: 0 2px 6px rgb(31 27 26 / 10%), 0 22px 50px -26px rgb(31 27 26 / 45%);

  color-scheme: light;
}

/* Dark: token-level overrides only. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #14100E;
    --ground-sunk: #0D0A09;
    --surface:     #1E1917;
    --surface-2:   #262020;

    --ink:         #F2EDE8;
    --ink-2:       #B3A9A2;
    --ink-3:       #877D77;

    --rule:        #322A27;
    --rule-strong: #4A403B;

    --accent:      #F58C3C;
    --accent-ink:  #FBA660;
    --accent-wash: #2E1D10;

    --open:        #6FC07C;
    --open-wash:   #14261A;
    --shut:        #EE8288;
    --shut-wash:   #2B1517;

    --shadow:    0 1px 2px rgb(0 0 0 / 55%), 0 10px 28px -18px rgb(0 0 0 / 85%);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 60%), 0 22px 50px -26px rgb(0 0 0 / 90%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:      #14100E;
  --ground-sunk: #0D0A09;
  --surface:     #1E1917;
  --surface-2:   #262020;

  --ink:         #F2EDE8;
  --ink-2:       #B3A9A2;
  --ink-3:       #877D77;

  --rule:        #322A27;
  --rule-strong: #4A403B;

  --accent:      #F58C3C;
  --accent-ink:  #FBA660;
  --accent-wash: #2E1D10;

  --open:        #6FC07C;
  --open-wash:   #14261A;
  --shut:        #EE8288;
  --shut-wash:   #2B1517;

  --shadow:    0 1px 2px rgb(0 0 0 / 55%), 0 10px 28px -18px rgb(0 0 0 / 85%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 60%), 0 22px 50px -26px rgb(0 0 0 / 90%);

  color-scheme: dark;
}