/*
 * Northwind tokens. 60/30/10:
 *   c60 --paper  page, white panels       c30 --deep  utility bar, form band, club card, footer, call bar
 *   c10 --accent call and quote buttons, emergency band, active nav, icons
 * Palettes below set the base values; the photo scenes and the service-area map mix from them.
 */
.t-local {
  color-scheme: light;
  --paper: #f6f4ef;
  --paper-2: #ece8df;
  --white: #ffffff;
  --field: #ffffff;
  --ink: #14202b;
  --slate: #4a5562;
  --rule: #d9d4ca;
  --rule-strong: #bfb8aa;
  --deep: #10263d;
  --deep-2: #1b3a5a;
  --deep-line: #2c4867;
  --deep-foot: #0b1b2c;
  --foot-line: #22374d;
  --on-deep: #f2f0ea;
  --on-deep-muted: #b9c3cf;
  --on-deep-strong: #ffffff;
  --accent: #c2410c;
  --accent-dark: #9a3412;
  --accent-hover: #9a3412;
  --accent-ink: #c2410c;
  --on-accent: #ffffff;
  --on-accent-muted: #fff3ea;
  --accent-on-deep: #f4a072;
  --signal: #f08a4b;
  --tint: #fff4ec;
  --select: #eef2f6;
  --focus: #1d64c4;
  --shadow: #10263d;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --r: 3px;
  --wrap: 78rem;
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Derived: photo scenes and map. Neutral grays pulled toward the palette's deep color. */
.t-local {
  --ph-base: color-mix(in srgb, var(--deep) 35%, #3a3f44);
  --ph-shade: color-mix(in srgb, var(--deep) 60%, #0a0e14);
  --ph-d1: color-mix(in srgb, var(--deep) 35%, #2b3138);
  --ph-d2: color-mix(in srgb, var(--deep) 28%, #3d444c);
  --ph-d3: color-mix(in srgb, var(--deep) 28%, #474e57);
  --ph-m: color-mix(in srgb, var(--deep) 18%, #8b8f93);
  --ph-m2: color-mix(in srgb, var(--deep) 20%, #59606a);
  --ph-m3: color-mix(in srgb, var(--deep) 18%, #6d7279);
  --ph-m4: color-mix(in srgb, var(--deep) 18%, #7c8188);
  --ph-l: color-mix(in srgb, var(--paper) 40%, #d9dadb);
  --ph-l2: color-mix(in srgb, var(--paper) 30%, #c9cbcc);
  --ph-l3: color-mix(in srgb, var(--paper) 25%, #b8bbbd);
  --ph-wall: color-mix(in srgb, var(--paper-2) 60%, #cfc8ba);
  --ph-wall-2: color-mix(in srgb, var(--paper-2) 45%, #b9b2a3);
  --ph-glow: color-mix(in srgb, var(--accent) 22%, #ffd6a0);
  --ph-glow-soft: color-mix(in srgb, var(--accent) 10%, #ffecd2);
  --map-bg: color-mix(in srgb, var(--paper-2) 70%, var(--paper));
  --map-contour: color-mix(in srgb, var(--rule) 85%, var(--paper-2));
  --map-water: color-mix(in srgb, var(--deep) 22%, var(--paper));
  --map-road: color-mix(in srgb, var(--accent) 18%, var(--paper));
  --map-area: color-mix(in srgb, var(--accent) 7%, transparent);
  --map-label: var(--ink);
  --map-note: var(--slate);
}

/* ---------- Palettes (selectors hit both <html> and <body>) ---------- */
[data-palette="forest"].t-local, [data-palette="forest"] .t-local {
  --paper: #f4f3ec; --paper-2: #e8e6da; --white: #fffefa; --field: #fffefa;
  --ink: #17221b; --slate: #4b564e; --rule: #d8d5c8; --rule-strong: #bdb9a8;
  --deep: #1d3a2c; --deep-2: #2a4d3b; --deep-line: #3a5a48; --deep-foot: #132a1f; --foot-line: #2a4436;
  --on-deep: #f1efe6; --on-deep-muted: #bccabf; --on-deep-strong: #ffffff;
  --accent: #f2b705; --accent-dark: #7a5a00; --accent-hover: #d9a300; --accent-ink: #7a5a00;
  --on-accent: #1a1a12; --on-accent-muted: #3a3205; --accent-on-deep: #f2b705;
  --signal: #f2b705; --tint: #fbf0c8; --select: #e7eee9; --focus: #1f5c86; --shadow: #132a1f;
}
[data-palette="charcoal"].t-local, [data-palette="charcoal"] .t-local {
  --paper: #f5f5f3; --paper-2: #e9e9e5; --white: #ffffff; --field: #ffffff;
  --ink: #1b1d20; --slate: #50555b; --rule: #dadad5; --rule-strong: #bdbdb6;
  --deep: #26292d; --deep-2: #34383d; --deep-line: #43474d; --deep-foot: #1b1d20; --foot-line: #34383d;
  --on-deep: #f2f2ef; --on-deep-muted: #bfc2c6; --on-deep-strong: #ffffff;
  --accent: #c8102e; --accent-dark: #9e0c24; --accent-hover: #9e0c24; --accent-ink: #c8102e;
  --on-accent: #ffffff; --on-accent-muted: #ffe9ec; --accent-on-deep: #ff7a8a;
  --signal: #ff5a6e; --tint: #fcebed; --select: #ececea; --focus: #1d64c4; --shadow: #1b1d20;
}
[data-palette="sky"].t-local, [data-palette="sky"] .t-local {
  --paper: #eef5f7; --paper-2: #e0ecf0; --white: #fbfdfe; --field: #ffffff;
  --ink: #0f2328; --slate: #44585e; --rule: #cfdee3; --rule-strong: #b2c6cc;
  --deep: #0f4a4f; --deep-2: #18606a; --deep-line: #2b6870; --deep-foot: #0a3539; --foot-line: #1d5258;
  --on-deep: #eef7f7; --on-deep-muted: #b6d2d4; --on-deep-strong: #ffffff;
  --accent: #1769c9; --accent-dark: #11519e; --accent-hover: #11519e; --accent-ink: #1769c9;
  --on-accent: #ffffff; --on-accent-muted: #e6f0fb; --accent-on-deep: #8cc4ff;
  --signal: #8cc4ff; --tint: #e3eefb; --select: #e3eef1; --focus: #0f4a4f; --shadow: #0a3539;
}

/* Fixed call bar on phones: lift the demo palette button above it. */
@media (max-width: 760px) {
  html.t-local { --demo-chrome-lift: 4rem; }
}
html.t-local { --anchor-offset: 1rem; }
html.t-local, body.t-local { margin: 0; background: var(--paper); color: var(--ink); }
html.t-local { font-size: 100%; }
.t-local *, .t-local *::before, .t-local *::after { box-sizing: border-box; }
.t-local h1, .t-local h2, .t-local h3, .t-local p, .t-local ul, .t-local ol, .t-local dl, .t-local dd, .t-local figure, .t-local blockquote, .t-local fieldset { margin: 0; }
.t-local ul, .t-local ol { padding: 0; list-style: none; }
.t-local fieldset { border: 0; padding: 0; min-width: 0; }
.t-local h1, .t-local h2, .t-local h3 { text-wrap: balance; }
.t-local p, .t-local li, .t-local dd { text-wrap: pretty; }
.t-local a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color .15s, text-decoration-color .15s, text-underline-offset .15s; }
@media (hover: hover) { .t-local a:hover { color: var(--accent-dark); text-decoration-color: currentColor; text-underline-offset: 0.24em; } }
.t-local button, .t-local input, .t-local select, .t-local textarea { font: inherit; color: inherit; }
.t-local :focus { outline: none; }
.t-local :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-local .skip { position: absolute; left: 1rem; top: 0; transform: translateY(-150%); background: var(--ink); color: var(--paper); padding: 0.6rem 0.9rem; z-index: 40; }
.t-local .skip:focus { transform: none; color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  /* transition: none, not 0.01ms: a zero-length transition still reports old colors until the next frame. */
  .t-local, .t-local *, .t-local *::before, .t-local *::after { transition: none !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .t-local :focus-visible { outline: 2px solid Highlight; } .t-local .btn { border: 1px solid ButtonText; } }