/* ═══════════════════════════════════════════
   brand.css — oulipo.xyz brand, self-contained.
   Shared across the Latent Space Games series
   (embeddings-experiment, embeddings-battleship,
   monster-meme-memory). Mirrors oulipo.xyz
   shared.css + tokens.css; section = machine talk.
   ═══════════════════════════════════════════ */

/* Cargo fonts (real brand stack) */
@font-face {
  font-display: block;
  font-family: "Standard";
  src: url("https://type.cargo.site/files/Standard-Book.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-display: block;
  font-family: "Standard";
  src: url("https://type.cargo.site/files/Standard-Bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-display: block;
  font-family: "Terminal Grotesque";
  src: url("https://type.cargo.site/files/TerminalGrotesque.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-display: block;
  font-family: "Diatype Variable";
  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
}
@font-face {
  font-display: block;
  font-family: "Diatype Mono Variable";
  src: url("https://type.cargo.site/files/Cargo-DiatypePlusVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
}

:root {
  /* Inks (opacity ladder) */
  --ink-85: rgba(0, 0, 0, 0.85);
  --ink-70: rgba(0, 0, 0, 0.7);
  --ink-60: rgba(0, 0, 0, 0.6);
  --ink-50: rgba(0, 0, 0, 0.5);
  --ink-40: rgba(0, 0, 0, 0.4);
  --paper: #ffffff;

  /* Borders */
  --border-strong: rgba(0, 0, 0, 0.75);
  --border-soft: rgba(0, 0, 0, 0.12);

  /* Machine-talk accent (carnation), AA-darkened for text on white */
  --accent: #f6009b;
  --accent-deep: #b8006f;

  /* Type families */
  --font-body: "Standard", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Terminal Grotesque", "Standard", sans-serif;
  --font-h2: "Diatype Variable", "Standard", sans-serif;
  --font-mono: "Diatype Mono Variable", ui-monospace, "JetBrains Mono", monospace;

  /* Type scale */
  --type-size-base: 1.06rem;
  --type-size-caption: 0.98rem;
  --type-size-meta: 0.96rem;
  --type-size-mini: 0.85rem;

  /* Spacing (8-step) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Motion */
  --t-opacity: opacity 0.3s ease;
  --t-border: border-color 0.2s ease;

  /* Dot cursor (magenta, 8px radius, 20x20 viewBox) */
  --dot-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='8' fill='%23f6009b'/></svg>") 10 10, pointer;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--type-size-base);
  line-height: 1.2;
  background: var(--paper);
  color: var(--ink-85);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
}

a { color: var(--ink-85); text-decoration: underline; transition: var(--t-opacity); }
a:hover, a:active { opacity: 0.7; }

/* ── series header ─────────────────────────── */
.lsg-topbar {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0, "MONO" 1;
  font-size: var(--type-size-mini);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-50);
  margin-bottom: var(--s-5);
}
.lsg-topbar a { color: var(--ink-50); text-decoration: none; cursor: var(--dot-cursor); }
.lsg-topbar a:hover { opacity: 0.7; color: var(--accent-deep); }

.lsg-header { margin-bottom: var(--s-6); }
.lsg-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink-85);
  text-transform: lowercase;
}
.lsg-header .lsg-caption {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0, "MONO" 1;
  font-size: var(--type-size-meta);
  color: var(--ink-60);
  margin-top: var(--s-3);
  max-width: 60ch;
  line-height: 1.4;
}

/* ── shared panels ─────────────────────────── */
.panel {
  border: 1px solid var(--border-soft);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--paper);
}

label {
  display: block;
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0, "MONO" 1;
  font-size: var(--type-size-mini);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-60);
  margin-bottom: var(--s-2);
}

input[type="text"], textarea {
  font-family: var(--font-body);
  font-size: var(--type-size-base);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink-85);
}
input[type="text"]:focus, textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}

/* Primary action — accent fill, rectangular */
button, .btn {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0, "MONO" 1;
  font-size: var(--type-size-mini);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: var(--dot-cursor);
  white-space: nowrap;
  transition: var(--t-opacity);
}
button:hover, .btn:hover { opacity: 0.7; }

/* Secondary action — ghost */
button.ghost, .btn.ghost {
  background: var(--paper);
  color: var(--ink-85);
  border: 1px solid var(--border-strong);
}
button:disabled {
  background: var(--paper);
  border-color: var(--border-soft);
  color: var(--ink-40);
  cursor: not-allowed;
}
button:disabled:hover { opacity: 1; }

/* Focus rings everywhere */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Mono caption type used by status / list rows */
.mono {
  font-family: var(--font-mono);
  font-variation-settings: "slnt" 0, "MONO" 1;
  font-size: var(--type-size-mini);
  color: var(--ink-60);
}

@media (max-width: 600px) {
  body { padding: var(--s-5) var(--s-4); }
  .lsg-header h1 { font-size: 3rem; }
}