/* ============================================================
   gl!tch lab — shared brand layer
   ============================================================
   Used by every page in the lab (landing + each tool).

   What lives here:
     1. Design tokens (colors, radii) — the umbrella palette
     2. Typography baseline — Bricolage body + Instrument display
     3. Wordmark styles — .brand, .brand-bang, .brand-dot
     4. Button design system — .btn-primary, .btn-secondary

   What does NOT live here:
     - Per-page layout (e.g. body flex/overflow, top bar grid).
       Each page owns its own structural CSS.
     - Tool-specific UI (tab bars, control sections, color rows).
       Those stay in the tool's own page/stylesheet.

   To use: link this file *before* the page's own <style> block so
   page-specific rules can override brand defaults when needed.

       <link rel="stylesheet" href="shared/brand.css">

   The Google Fonts <link> still goes in each HTML head — it needs
   to be in the markup for the browser's preconnect hint to work.
   ============================================================ */

:root {
  --bg: #f6f1e7;
  --surface: #ffffff;
  --ink: #15151c;
  --ink-soft: rgba(21, 21, 28, 0.55);
  --ink-mute: rgba(21, 21, 28, 0.32);
  --line: rgba(21, 21, 28, 0.08);
  --line-strong: rgba(21, 21, 28, 0.18);
  --accent: #ff6b9d;
  --sand: #ece5d5;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Wordmark =====
   The "gl!tch" lockup. The 'i' is swapped for '!' and tinted with
   --accent so the broken-character substitution reads intentionally.
   The trailing ◆ is a Bricolage-set dot (not italic), nudged up so
   it sits like a register mark next to the serif wordmark.

   For the umbrella ("gl!tch lab"), reuse <h1 class="brand"> and put
   " lab" as plain text after the closing tag's ◆.
*/
.brand {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}
/* Wrapper for the wordmark when used as a back-to-landing link (in
   tool pages). Strips default <a> styling so the wordmark looks the
   same as a plain heading. */
.brand-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.brand-link:hover .brand { opacity: 0.7; transition: opacity 0.15s ease; }
.brand-bang {
  color: var(--accent);
  /* Stays italic via inheritance from .brand. The accent color makes
     the 'i → !' substitution read as the intentionally "broken" character. */
}
.brand-dot {
  color: var(--accent);
  font-style: normal;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  position: relative;
  top: -6px;
  margin-left: 2px;
}

/* ===== Button design system ===== */
.btn-primary {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.btn-primary:hover:not(:disabled) { background: #000; }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { background: rgba(21,21,28,0.04); }
.btn-secondary[data-state="locked"] {
  color: var(--ink-mute);
  border-color: var(--line);
  pointer-events: none;
}
.btn-icon-arrow { font-size: 13px; line-height: 1; transform: translateY(-1px); }