/* CW&T Design System — tokens
   Vendored from the "CW&T Design System" project (colors_and_type.css).
   Space Mono is loaded from Google Fonts rather than the project's bundled
   .ttf files; same typeface, no binaries in the repo.

   Local additions are confined to the two clearly-marked blocks at the end:
   a dark scheme and a few map-surface tokens. The system itself defines
   neither. Nothing above those blocks deviates from the source. */

:root {
  /* ─── Type ───────────────────────────────────────────────── */
  --font-mono:    "Space Mono", "JetBrains Mono", "Menlo", "Courier New", monospace;
  --font-display: "Space Mono", "JetBrains Mono", "Menlo", "Courier New", monospace;
  --font-system:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-12: 11px;
  --fs-14: 13px;
  --fs-16: 15px;
  --fs-18: 17px;
  --fs-20: 19px;
  --fs-24: 22px;
  --fs-32: 30px;
  --fs-48: 44px;
  --fs-64: 60px;
  --fs-96: 92px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --ls-label: 0.04em;
  --ls-tight: -0.01em;
  --ls-body:  0;

  /* ─── Color: ink + paper ──────────────────────────────────── */
  --ink:        #111111;
  --ink-soft:   #4a4a4a;
  --ink-faint:  #8a8a8a;
  --rule:       #e3e3e3;
  --rule-soft:  #efefef;
  --paper:      #ffffff;
  --paper-2:    #f6f5f2;
  --paper-3:    #ececea;

  /* ─── Color: machined-metal greys ─────────────────────────── */
  --metal-stainless: #b9b8b3;
  --metal-titanium:  #8c8c87;
  --metal-graphite:  #3a3a38;
  --metal-brass:     #b08a4d;
  --metal-copper:    #b56b3f;
  --metal-cerakote:  #1a1a18;

  /* ─── Color: signal accents (used sparingly) ──────────────── */
  --signal-red:    #d11d1d;
  --signal-orange: #e35a1e;
  --signal-yellow: #efc94c;
  --signal-green:  #2e7d4f;

  /* ─── Semantic ────────────────────────────────────────────── */
  --fg-1: var(--ink);
  --fg-2: var(--ink-soft);
  --fg-3: var(--ink-faint);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --border: var(--rule);
  --border-strong: var(--ink);

  /* ─── Spacing — 4px base ──────────────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ─── Radius — almost always 0 ────────────────────────────── */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;

  /* ─── Borders ─────────────────────────────────────────────── */
  --bw-hair: 1px;
  --bw-rule: 1px;
  --bw-bold: 2px;

  /* ─── Shadows — extremely restrained ──────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);

  /* ─── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  /* ═══ LOCAL ADDITION — map surface ════════════════════════════
     The system has no map primitives. Colour is kept absent per rule 2:
     the basemap is desaturated to neutral grey so the only colour on
     screen is the signal accent on the pins. */
  --tile-filter: grayscale(1) contrast(1.06) brightness(0.985);
  --map-bg: var(--paper-2);
  --accent: var(--signal-orange);
  --panel-w: 23.5rem;

  /* ═══ LOCAL ADDITION — tag colours ═══════════════════════════
     A pin's colour states what a place is. Five come straight from the
     system's signal and metal sets; the system has no blue, so music
     carries the one invented value here. This is a wider use of colour
     than rule 2 strictly allows — it is the map's only legend. */
  --tag-food:     var(--signal-orange);   /* #e35a1e */
  --tag-art:      var(--signal-red);      /* #d11d1d */
  --tag-shop:     var(--metal-brass);     /* #b08a4d */
  --tag-music:    #2f6db5;                /* invented — no blue in the system */
  --tag-outdoors: var(--signal-green);    /* #2e7d4f */
  --tag-active:   var(--metal-graphite);  /* #3a3a38 */
  --tag-none:     var(--metal-titanium);  /* #8c8c87 */
}

/* ═══ LOCAL ADDITION — dark scheme ══════════════════════════════
   Not part of the CW&T system, which is white-paper only. Derived by
   swapping ink and paper and holding the signal accent, so a night
   viewer gets the same austerity rather than a second palette.

   Applied when the OS asks for dark and the visitor has not forced light,
   or when the visitor has explicitly chosen dark. The block is duplicated
   rather than folded into light-dark(), so an old engine degrades to the
   light scheme instead of to unresolvable colours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #ededea;
    --ink-soft:  #a8a8a4;
    --ink-faint: #6e6e6a;
    --rule:      #2a2a28;
    --rule-soft: #202020;
    --paper:     #111111;
    --paper-2:   #191918;
    --paper-3:   #222221;

    --signal-red: #f2453f;
    --signal-orange: #ff7a3d;

    /* Tag colours that would sink into a dark ground. food and art follow
       their signal tokens above; these four need lifting. */
    --tag-shop:     #d4a866;
    --tag-music:    #5b9bd8;
    --tag-outdoors: #4aa873;
    --tag-active:   var(--metal-stainless);
    --tag-none:     #7e7e79;

    --tile-filter: grayscale(1) invert(0.92) contrast(0.92) brightness(1.02);
  }
}

:root[data-theme="dark"] {
  --ink:       #ededea;
  --ink-soft:  #a8a8a4;
  --ink-faint: #6e6e6a;
  --rule:      #2a2a28;
  --rule-soft: #202020;
  --paper:     #111111;
  --paper-2:   #191918;
  --paper-3:   #222221;

  --signal-red: #f2453f;
  --signal-orange: #ff7a3d;

  --tag-shop:     #d4a866;
  --tag-music:    #5b9bd8;
  --tag-outdoors: #4aa873;
  --tag-active:   var(--metal-stainless);
  --tag-none:     #7e7e79;

  --tile-filter: grayscale(1) invert(0.92) contrast(0.92) brightness(1.02);
}

/* Keeps form controls and scrollbars in step with the chosen scheme. */
:root                    { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ─── Semantic role classes ───────────────────────────────────── */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* The CW&T ID label — the studio's mark. Rule 1: never stylise it. */
.idl__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--fg-1);
}
.idl__expansion {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-14);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}

.hr { height: 1px; background: var(--border); border: 0; margin: 0; }

a, .link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur) var(--ease);
}
a:hover, .link:hover { opacity: 0.55; }
a:active, .link:active { opacity: 0.8; }

/* Buttons — per preview/components-buttons.html */
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.btn:hover { opacity: 0.55; }
.btn-primary   { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost     { background: transparent; color: var(--ink); border: 1px solid var(--rule); }