/* =========================================================
   The Build Lab — design tokens + shared primitives
   Warm premium aesthetic. Coral / paper / warm-dark.
   ========================================================= */
:root {
  /* paper (light) */
  --paper:        #f5f1ea;
  --paper-2:      #ebe5da;
  --paper-3:      #ddd5c6;
  --surface-1:    #ffffff;
  --nav-bg:       rgba(245,241,234,.85);
  --ink:          #1a1612;
  --ink-2:        #3a322a;
  --ink-dim:      #5b5247;
  --ink-mute:     #8a8073;
  --line-paper:   #d9d1c5;
  --line-paper-2: #c4baa9;

  /* dark */
  --dark:         #16110d;
  --dark-2:       #1f1812;
  --dark-3:       #29211a;
  --dark-4:       #352b22;
  --bone:         #f4eee3;
  --bone-dim:     #c9c0b1;
  --bone-mute:    #8a8073;
  --line-dark:    #2e261f;
  --line-dark-2: #41372d;

  /* accent — warm rust coral. NOT the Claude orange. */
  --accent:       #d96846;
  --accent-deep:  #b8451f;
  --accent-soft:  #f3c3ab;
  --accent-tint:  #fae5d8;
  --accent-glow:  #ff8b62;

  /* secondaries */
  --sage:         #6b9a5f;       /* "live / success" — used sparingly */
  --sage-deep:    #3d6a32;
  --amber:        #e3a44e;       /* in-progress / warning */
  --lavender:     #8a7ab5;       /* membership / premium chip */
  --blue:         #5b7fb0;

  /* type */
  --serif: 'Instrument Serif', 'Newsreader', ui-serif, Georgia, serif;
  --sans:  'Geist', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', 'Geist Mono', ui-monospace, Menlo, monospace;

  /* shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-soft: 0 1px 0 rgba(26,22,18,.04), 0 10px 40px -20px rgba(26,22,18,.18);
  --shadow-card: 0 1px 0 rgba(26,22,18,.06), 0 18px 60px -28px rgba(26,22,18,.22);
}

/* ---------- artboard reset ---------- */
.bl-board {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bl-board *,
.bl-board *::before,
.bl-board *::after { box-sizing: border-box; }
.bl-board p { margin: 0; }
.bl-board h1, .bl-board h2, .bl-board h3, .bl-board h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.bl-board a { color: inherit; text-decoration: none; }
.bl-board button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; }
.bl-board code, .bl-board pre { font-family: var(--mono); }

/* ---------- type primitives ---------- */
.bl-display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.bl-italic { font-family: var(--serif); font-style: italic; }
.bl-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.bl-eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
}

/* ---------- buttons ---------- */
.bl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--sans); font-weight: 500;
  font-size: 14px;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.bl-btn:active { transform: translateY(1px); }
.bl-btn-primary { background: var(--ink); color: var(--paper); }
.bl-btn-primary:hover { background: var(--accent-deep); }
.bl-btn-accent  { background: var(--accent); color: #fff; }
.bl-btn-accent:hover { background: var(--accent-deep); }
.bl-btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-paper-2);
}
.bl-btn-ghost:hover { background: var(--paper-2); }
.bl-btn-dark { background: var(--bone); color: var(--dark); }
.bl-btn-dark-ghost {
  background: transparent; color: var(--bone);
  border: 1px solid var(--line-dark-2);
}
.bl-btn-dark-ghost:hover { background: var(--dark-3); }

/* ---------- chips / tags ---------- */
.bl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--paper-2);
  color: var(--ink-dim);
  border: 1px solid var(--line-paper);
}
.bl-chip-accent  { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-soft); }
.bl-chip-sage    { background: #e3ecd9; color: var(--sage-deep); border-color: #b9cda4; }
.bl-chip-dark    { background: var(--dark-3); color: var(--bone-dim); border-color: var(--line-dark-2); }
.bl-chip-lock    { background: transparent; color: var(--ink-mute); border-color: var(--line-paper); }

/* ---------- cards ---------- */
.bl-card {
  background: var(--surface-1);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.bl-card-dark {
  background: var(--dark-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
}

/* ---------- hairlines + nodes ---------- */
.bl-hairline { border-top: 1px solid var(--line-paper); }
.bl-hairline-dark { border-top: 1px solid var(--line-dark); }

/* ---------- "engineer" markers ---------- */
.bl-marker {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.bl-cornermark {
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  background: var(--paper);
}
.bl-cornermark.tl { top: -5px; left: -5px; }
.bl-cornermark.tr { top: -5px; right: -5px; }
.bl-cornermark.bl { bottom: -5px; left: -5px; }
.bl-cornermark.br { bottom: -5px; right: -5px; }

/* ---------- subtle terminal cursor ---------- */
@keyframes bl-blink { 50% { opacity: 0; } }
.bl-cursor::after {
  content: '▎';
  margin-left: 4px;
  color: var(--accent);
  animation: bl-blink 1.05s steps(1) infinite;
}

/* ---------- packet flow animation ---------- */
@keyframes bl-packet { from { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

/* ---------- lock overlays ---------- */
.bl-locked {
  position: relative;
  overflow: hidden;
}
.bl-locked > .bl-locked-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(245,241,234,0) 0%, rgba(245,241,234,.55) 35%, rgba(245,241,234,.95) 70%);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 18px;
  pointer-events: none;
}
.bl-locked-dark > .bl-locked-veil {
  background: linear-gradient(180deg, rgba(22,17,13,0) 0%, rgba(22,17,13,.55) 35%, rgba(22,17,13,.95) 70%);
}

/* ---------- focus rings (a11y, premium feel) ---------- */
.bl-board :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- utility ---------- */
.bl-row { display: flex; }
.bl-col { display: flex; flex-direction: column; }
.bl-grow { flex: 1; }
.bl-mono { font-family: var(--mono); }
.bl-serif { font-family: var(--serif); }


/* =========================================================
   Dark mode — warm graphite palette
   Activated by <html data-theme="dark"> (set in index.html
   bootstrap script before body paints, so no FOUC).
   Intentional always-dark sections keep using --dark/--bone
   tokens which are NOT redefined here.
   ========================================================= */
:root[data-theme="dark"] {
  --paper:        #232020;
  --paper-2:      #2b2826;
  --paper-3:      #353231;
  --ink:          #f5f1ea;
  --ink-2:        #e3dccc;
  --ink-dim:      #c9c0b1;
  --ink-mute:     #8a8073;
  --line-paper:   #3a3633;
  --line-paper-2: #46413c;

  --surface-1:    #2b2826;
  --nav-bg:       rgba(35, 32, 32, 0.88);

  /* slightly punchier accent + softer tints for dark surfaces */
  --accent-tint:  #3a2218;
  --accent-soft:  #6b3927;

  /* readable sage on dark surfaces */
  --sage:         #8ab87e;
  --sage-deep:    #b6d6a7;
}

/* lock veil reads correctly on graphite */
:root[data-theme="dark"] .bl-locked > .bl-locked-veil {
  background: linear-gradient(180deg, rgba(35,32,32,0) 0%, rgba(35,32,32,.55) 35%, rgba(35,32,32,.95) 70%);
}

/* sage chip in dark mode — readable */
:root[data-theme="dark"] .bl-chip-sage {
  background: #2d3a26; color: #b6d6a7; border-color: #4a6240;
}

/* theme toggle button base — used by ThemeToggle in Nav */
.bl-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-paper-2);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bl-theme-toggle:hover {
  background: var(--paper-2);
  color: var(--ink);
}