/* ==========================================================================
   tessel·la design tokens, shared by index.html and docs.html.
   The language comes from the Robo-Boy teaser: a cream ground, cobalt letters,
   a tangerine dot, night-black footage grounds; Bricolage Grotesque condensed
   for headlines, Courier Prime for the wordmark and code, Doto for labels.
   ========================================================================== */

:root {
  /* Fixed palette (the teaser's colours). */
  --cream: #FFF6D5;
  --paper-fixed: #FFFBEC;
  --cobalt: #3E5FD8;
  --cobalt-deep: #2A45B8;
  --cobalt-light: #9FB3FF;
  --tangerine: #FF8722;
  --tangerine-soft: #FFA65C;
  --night: #121212;
  --night-2: #1E1E1E;
  --sky: #CFD9FF;
  --good: #2E9E4A;
  --warn: #C98200;

  /* Theme roles: light is the teaser's cream world. */
  --bg: var(--cream);
  --paper: var(--paper-fixed);
  --paper-raised: #FFFDF6;
  --ink: var(--night);
  --ink-soft: #4B4535;
  --ink-mute: #6B6450;
  --brand: var(--cobalt);
  --accent: var(--tangerine);
  --accent-soft: var(--tangerine-soft);
  --accent-ink: var(--night);
  --accent-wash: rgba(255, 135, 34, .12);
  --border: rgba(18, 18, 18, .14);
  --border-soft: rgba(18, 18, 18, .07);
  --code-bg: var(--night);
  --code-ink: var(--cream);
  --header-bg: rgba(255, 246, 213, .82);
  --shadow: 0 30px 70px -24px rgba(18, 18, 18, .38), 0 10px 22px -10px rgba(18, 18, 18, .2);

  /* Type roles. */
  --display: "Bricolage Grotesque", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --body: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --label: "Doto", "Courier Prime", ui-monospace, monospace;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  color-scheme: light;
}

/* Dark is the teaser's night world. */
:root[data-theme="dark"] {
  --bg: var(--night);
  --paper: #1B1B19;
  --paper-raised: #222220;
  --ink: var(--cream);
  --ink-soft: #D8CEAC;
  --ink-mute: #A59D83;
  --brand: var(--cobalt-light);
  --accent-wash: rgba(255, 135, 34, .14);
  --border: rgba(255, 246, 213, .15);
  --border-soft: rgba(255, 246, 213, .07);
  --code-bg: #0B0B0B;
  --header-bg: rgba(18, 18, 18, .8);
  --shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 10px 22px -10px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night);
    --paper: #1B1B19;
    --paper-raised: #222220;
    --ink: var(--cream);
    --ink-soft: #D8CEAC;
    --ink-mute: #A59D83;
    --brand: var(--cobalt-light);
    --accent-wash: rgba(255, 135, 34, .14);
    --border: rgba(255, 246, 213, .15);
    --border-soft: rgba(255, 246, 213, .07);
    --code-bg: #0B0B0B;
    --header-bg: rgba(18, 18, 18, .8);
    --shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 10px 22px -10px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* ---------- Shared elements ---------- */

::selection { color: var(--night); background: var(--tangerine); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  padding: 8px 14px; border-radius: 999px;
  color: var(--night); background: var(--tangerine);
  font: 700 14px/1 var(--mono);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* The full stop of a kinetic headline is the dot. */
.stop { color: var(--tangerine); }

/* Brand bug: the tessel·la mark (l · l) and the wordmark in Courier Prime. */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  font: 700 21px/1 var(--mono); letter-spacing: -.02em;
}
.brand svg { width: 28px; height: 28px; flex: none; }
/* Courier's middle dot has a full-width cell; pull the l's in so the dot sits between their stems,
   .18em from each (the stems end .36em into the l's cell, the dot's ink starts .22em into its own). */
.brand .mid { margin: 0 -.25em 0 -.26em; color: var(--tangerine); }

.theme-toggle {
  width: 40px; height: 40px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  color: inherit; background: transparent; cursor: pointer;
  opacity: .8; transition: opacity .2s, transform .2s;
}
.theme-toggle:hover { opacity: 1; transform: rotate(-12deg); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun-icon { display: none; }
:root[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun-icon { display: block; }

/* Buttons: the primary one is the teaser's tangerine sticker. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid currentColor; border-radius: 999px;
  color: inherit; background: transparent;
  font: 700 15px/1 var(--mono); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background-color .18s, color .18s, border-color .18s;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--accent { border-color: var(--tangerine); color: var(--night); background: var(--tangerine); }
.btn--accent:hover { background: var(--tangerine-soft); border-color: var(--tangerine-soft); }
.btn--quiet { border-color: var(--border); }
.btn--quiet:hover { border-color: currentColor; }

/* Chips and labels in the dot-matrix face. */
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 9px; border-radius: 999px;
  font: 800 14px/1 var(--label); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.label {
  font: 800 15px/1.1 var(--label); letter-spacing: .06em; text-transform: uppercase;
}

/* The logo's link (two dots joined by a bar, in the logo's proportions) is an SVG symbol coloured inside itself. */
.link-glyph { width: 1em; height: 1em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}