/* Wayfinder redesign kit — tokens + the keycap-and-flat recipes, transcribed from the app
   (src/index.css, src/components/home/home.css, mock-ups/wayfinder-technical-elements.html §18–19).
   Variants link this first, then add their own layout/voice. Do not hardcode a hex that has a token here.

   THE BLEND, in one sentence: every surface is a FLAT fill (white, p50, t50, a solid tint) with an ink
   outline and ONE thick bottom edge that is the key's floor. No gradients, no blur shadows, no glass.
   A pressed key sinks by what its floor loses; the outer height never changes. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400;1,600&display=swap");
@import url("https://unpkg.com/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css");

:root {
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;      /* UI + body */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;     /* headings, big numbers */
  --font-serif: "Source Serif 4", Georgia, serif;                   /* Maya's voice, notes, documents */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;            /* sparing: coordinates only */
  --ease-wf: cubic-bezier(.2, .8, .2, 1);

  /* purple (action / Maya) */
  --p50: #eeedfe; --p100: #cecbf6; --p200: #afa9ec; --p400: #7f77dd; --p500: #6e65d1; --p600: #534ab7; --p800: #3c3489;
  /* teal (progress / done) */
  --t50: #e1f5ee; --t200: #9fe1cb; --t400: #1d9e75; --t600: #0f6e56; --t800: #085041;
  /* orange (the warm signal: a clock is running, celebration) */
  --o50: #fff0de; --o200: #ffc489; --o400: #ff8811; --o600: #b85f06; --o800: #7a3d04;
  /* coral (expressive brand accent, never a verdict) */
  --co50: #fbe9e9; --co200: #edb3b3; --co400: #d16666; --co600: #a84a4a; --co800: #723030;
  /* sky (links) · dusk (company tiles, ended things) */
  --sk50: #e6f6ff; --sk400: #0b90cc; --sk600: #005f8b;
  --dk50: #f2f3fa; --dk200: #d3d8ea; --dk400: #556089; --dk600: #4c5680;
  /* crimson: errors only. Never on a tile. */
  --cr400: #cc2936;

  --g50: #f7f6f2; --g100: #edecea; --g200: #d3d1c7; --g400: #888780; --g600: #5f5e5a; --g800: #2c2c2a;
  --text: #1a1a18; --text2: #5f5e5a; --text3: #9b9a94;
  --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-500: #737373; --neutral-900: #171717;
  --surface: #fff;
  --nav-bg: color-mix(in srgb, var(--p50) 45%, #fff);
  --hairline: var(--neutral-200);

  /* the three radii that matter: cap 6 (between 4 and 8), button 8, card 16; rows 12 */
  --r-cap: 6px; --r-btn: 8px; --r-row: 12px; --r-card: 16px;
  --floor-cap: 3px; --floor-row: 4px; --floor-card: 5px;
  --shadow-menu: 0 16px 44px rgba(44, 44, 42, .16);   /* menus/overlays only; cards never carry a blur shadow */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); letter-spacing: .01em; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; font-weight: 500; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.voice { font-family: var(--font-serif); font-style: italic; }           /* Maya speaking */

/* the board's ground: a lavender wash with a dot grid, exactly as Home draws it */
.ground { background: var(--p50) radial-gradient(color-mix(in srgb, var(--p200) 45%, transparent) 1.2px, transparent 1.4px) 0 0 / 22px 22px; }

/* ── CAP · a glyph on a key ───────────────────────────── */
.kc { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--neutral-300); border-bottom-width: var(--floor-cap); border-radius: var(--r-cap); background: #fff; font: 600 12px/1 system-ui, -apple-system, sans-serif; color: var(--text2); transition: transform .08s, border-color .12s, color .12s; }
.kc.on, .kc:active { transform: translateY(2px); border-bottom-width: 1px; border-color: var(--p400); color: var(--p600); }

/* ── KEY BUTTON · the action. Filled p600 on a p800 floor appears ONCE per cluster ─ */
.kp { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-btn); background: var(--p600); border-bottom: 4px solid var(--p800); font: 600 14px var(--font-sans); color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; transition: translate .1s, border-width .1s; }
.kp:hover { translate: 0 -1px; } .kp:active { translate: 0 3px; border-bottom-width: 1px; }
.kp.quiet { background: #fff; color: var(--p800); border: 1px solid var(--p200); border-bottom-width: 4px; }
.kp.warm { background: var(--o400); border-bottom-color: var(--o800); color: var(--text); }
.kp.teal { background: var(--t400); border-bottom-color: var(--t800); }
.kp .kc { border-color: rgba(255,255,255,.55); background: transparent; color: #fff; height: 22px; }
.kp.sm { height: 32px; padding: 0 12px; font-size: 12px; border-bottom-width: 3px; }

/* ── BOX · a board card: flat fill, ink outline, a thick floor ─────────── */
.bx { --ink: var(--p800); position: relative; padding: 16px 18px; border: 1.5px solid var(--ink); border-bottom-width: 5px; border-radius: var(--r-card); background: var(--surface); }
.bx.tint-p { background: var(--p50); } .bx.tint-t { background: var(--t50); } .bx.tint-o { background: var(--o50); } .bx.tint-co { background: var(--co50); }
.bx.deep { border-width: 2px; border-bottom-width: 9px; }        /* the one big card on a page (Home's vision card) */
.bx.soft { --ink: var(--p200); border-width: 1px; border-bottom-width: 4px; }  /* quieter: hairline-lavender edge */

/* ── LABEL · a small keyed tag; the ONLY place small caps are allowed ──── */
.lb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 7px; border: 1.5px solid var(--p800); border-bottom-width: 3px; border-radius: var(--r-btn); background: var(--t50); font: 700 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--p800); white-space: nowrap; }
.lb.p { background: var(--p50); } .lb.o { background: var(--o50); } .lb.w { background: #fff; color: var(--p600); }

/* ── ROW · a list row as a key; .on is the key held down ───────────────── */
.kr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--neutral-300); border-bottom-width: var(--floor-row); border-radius: var(--r-row); background: #fff; }
.kr.on { transform: translateY(2px); border-color: var(--p400); border-bottom-width: 2px; background: var(--p50); }
.kr .t { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; } .kr.on .t { color: var(--p600); }
.kr .m { display: block; margin-top: 3px; font-size: 12px; color: var(--text3); }

/* ── TILE · a company as a small key: 400 fill, white letter, 3px floor ── */
.kt { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-btn); font: 600 12px var(--font-sans); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.24); }
.kt.p { background: var(--p400); } .kt.t { background: var(--t400); } .kt.o { background: var(--o400); } .kt.co { background: var(--co400); } .kt.dk { background: var(--dk400); }
.kt.lg { width: 40px; height: 40px; font-size: 15px; }
/* a person is NOT a key: round, soft triple (never put .kt on a person) */
.av { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--p800); border-bottom-width: 3px; background: var(--p100); font: 600 15px var(--font-sans); color: var(--p800); }

/* ── FRAME · holds a real app screenshot as a flat object with a floor ─── */
.shot { --ink: var(--p800); display: block; overflow: hidden; border: 1.5px solid var(--ink); border-bottom-width: 6px; border-radius: var(--r-card); background: #fff; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ── TAPE · washi on a card, as Home does ──────────────────────────────── */
.tape { position: absolute; width: 84px; height: 22px; border: 1.5px solid var(--p800); border-radius: 4px; background: repeating-linear-gradient(135deg, var(--p200) 0 7px, var(--p100) 7px 14px); }
.tape.t { background: repeating-linear-gradient(135deg, var(--t200) 0 7px, var(--t50) 7px 14px); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
:focus-visible { outline: 3px solid var(--p400); outline-offset: 2px; }