/* =====================================================================
   Vektyr — brand.css
   Companion stylesheet for Brandbook v1.0 (public/brandbook.html)
   Self-contained: defines design tokens, typography, page layout, and
   the named structural classes the brandbook uses.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400..700;1,400..700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Type families */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Lora", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Cream (warm off-white) — the signature surface */
  --cream: hsl(36 33% 96%);
  --cream-deep: hsl(37 30% 93%);
  --cream-deeper: hsl(36 28% 90%);

  /* Burgundy scale */
  --burgundy-50:  hsl(350 40% 96%);
  --burgundy-100: hsl(350 40% 90%);
  --burgundy-200: hsl(350 40% 80%);
  --burgundy-300: hsl(350 40% 65%);
  --burgundy-400: hsl(350 40% 50%);
  --burgundy-500: hsl(350 40% 38%);
  --burgundy-600: hsl(350 42% 30%);
  --burgundy-700: hsl(350 44% 22%);
  --burgundy-900: hsl(350 50% 12%);

  /* Ink (deep brown-black) */
  --ink:       hsl(20 15% 15%);
  --ink-soft:  hsl(20 12% 30%);
  --ink-mute:  hsl(20 10% 45%);

  /* Warm neutrals */
  --warm-gray:    hsl(30 18% 88%);
  --warm-gray-2:  hsl(30 15% 80%);
  --warm-gray-3:  hsl(30 12% 65%);
  --warm-gray-4:  hsl(30 10% 50%);

  /* Semantic states */
  --ok:         hsl(150 35% 38%);
  --ok-soft:    hsl(150 35% 92%);
  --warn:       hsl(35 70% 45%);
  --warn-soft:  hsl(38 80% 92%);
  --danger:     hsl(0 60% 45%);
  --danger-soft:hsl(0 70% 95%);
  --info:       hsl(210 40% 40%);
  --info-soft:  hsl(210 50% 94%);

  /* Data-viz palette (6) */
  --dv-1: hsl(350 40% 38%);
  --dv-2: hsl(20 35% 35%);
  --dv-3: hsl(35 55% 45%);
  --dv-4: hsl(150 30% 35%);
  --dv-5: hsl(210 35% 38%);
  --dv-6: hsl(280 25% 40%);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;

  /* Shadows */
  --shadow-1: 0 1px 2px hsl(20 15% 15% / 0.06);
  --shadow-2: 0 8px 24px hsl(20 15% 15% / 0.08);
  --shadow-3: 0 24px 60px hsl(20 15% 15% / 0.14);

  /* Page geometry — 286 x 365 mm screen mock */
  --page-w: 1080px;
  --page-h: 1380px;
  --page-pad: 88px;
}

/* ============== Reset / base ============== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: hsl(30 14% 92%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
hr { border: none; border-top: 1px solid hsl(20 15% 15% / 0.08); margin: var(--s-5) 0; }

/* ============== Typography ============== */
.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s,
.t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.t-display-xl { font-size: 152px; line-height: 0.9;  letter-spacing: -0.04em; }
.t-display-l  { font-size: 96px;  line-height: 0.96; letter-spacing: -0.035em; }
.t-display-m  { font-size: 64px;  line-height: 1.02; letter-spacing: -0.025em; }
.t-display-s  { font-size: 44px;  line-height: 1.08; letter-spacing: -0.02em; }
.t-h1         { font-size: 56px;  line-height: 1.05; letter-spacing: -0.025em; }
.t-h2         { font-size: 32px;  line-height: 1.18; letter-spacing: -0.015em; }
.t-h3         { font-size: 22px;  line-height: 1.28; font-weight: 600; }
.t-lead       { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.t-small      { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.t-mono       { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }
.t-mono-s     { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.t-eyebrow    { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burgundy-500); }
.t-eyebrow--mute { color: var(--ink-mute); }
em { font-style: italic; color: var(--burgundy-500); }

/* ============== Document scaffolding ============== */
.doc { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.doc-rule {
  width: var(--page-w); height: 1px;
  background: hsl(20 15% 15% / 0.08);
}
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--cream);
  color: var(--ink);
  padding: var(--page-pad);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.page--cream-deep { background: var(--cream-deep); }
.page--ink        { background: var(--ink); color: var(--cream); }
.page--burgundy   { background: var(--burgundy-500); color: var(--cream); }
.page__head {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  margin-bottom: var(--s-6);
}
.page__num {
  position: absolute;
  right: var(--page-pad); bottom: 40px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
  color: currentColor;
  opacity: 0.45;
}

/* ============== Layout helpers ============== */
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s-2); }
.divider { height: 1px; background: hsl(20 15% 15% / 0.08); margin: var(--s-5) 0; }
.lock { display: inline-flex; gap: 8px; align-items: center; }

/* ============== Cards / generic surfaces ============== */
.card {
  background: var(--cream);
  border: 1px solid hsl(20 15% 15% / 0.08);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.card--filled { background: var(--cream-deep); }
.card--quiet  { background: transparent; border-color: hsl(20 15% 15% / 0.06); }

/* ============== Buttons ============== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  background: var(--burgundy-500);
  color: var(--cream);
  border: 1px solid var(--burgundy-500);
  cursor: pointer;
  text-decoration: none;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: hsl(20 15% 15% / 0.16);
}

/* ============== Tags / chips ============== */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--warm-gray);
  color: var(--ink-soft);
}
.tag--burgundy { background: var(--burgundy-100); color: var(--burgundy-700); }
.tag--ok       { background: var(--ok-soft);     color: var(--ok); }
.tag--warn     { background: var(--warn-soft);   color: var(--warn); }
.tag--danger   { background: var(--danger-soft); color: var(--danger); }
.tag--info     { background: var(--info-soft);   color: var(--info); }

/* ============== TOC ============== */
.toc { display: grid; gap: 6px; }
.toc__row {
  display: grid;
  grid-template-columns: 36px 1fr 60px;
  gap: var(--s-3);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid hsl(20 15% 15% / 0.06);
}
.toc__row:last-child { border-bottom: 0; }
.toc__num   { font-family: var(--font-mono); font-size: 12px; color: var(--burgundy-500); letter-spacing: 0.08em; }
.toc__title { font-family: var(--font-display); font-size: 18px; }
.toc__page  { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: right; }

/* ============== Wordmark display ============== */
.wm { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.wm__mark { width: 40px; height: 40px; color: var(--burgundy-500); }
.wm__mark svg, .wm__mark img { width: 100%; height: 100%; display: block; }
.wm__txt {
  font-family: var(--font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -0.01em;
}
.wm--m  .wm__mark { width: 56px; height: 56px; }
.wm--m  .wm__txt  { font-size: 40px; }
.wm--xl .wm__mark { width: 96px; height: 96px; }
.wm--xl .wm__txt  { font-size: 88px; letter-spacing: -0.03em; }

/* ============== Color swatches ============== */
.swatch {
  display: flex; flex-direction: column; gap: 0;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid hsl(20 15% 15% / 0.06);
}
.swatch__chip { aspect-ratio: 4 / 3; }
.swatch__chip--bordered { border-bottom: 1px solid hsl(20 15% 15% / 0.08); }
.swatch__body {
  padding: 12px 14px; background: var(--cream);
  display: flex; flex-direction: column; gap: 2px;
}
.swatch__name { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.swatch__hex  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* ============== Type spec rows ============== */
.spec { display: flex; flex-direction: column; gap: var(--s-3); }
.spec-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid hsl(20 15% 15% / 0.06);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; }
.spec-row__sample { color: var(--ink); }

/* ============== Do / Don't ============== */
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.dd {
  border-radius: var(--r-3);
  padding: var(--s-4);
  background: var(--cream-deep);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.dd--do { border-left: 3px solid var(--ok); }
.dd--no { border-left: 3px solid var(--danger); }
.dd__mark {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dd--do .dd__mark { color: var(--ok); }
.dd--no .dd__mark { color: var(--danger); }
.dd__text { font-size: 14px; line-height: 1.55; }
.dd__note { font-size: 12px; color: var(--ink-mute); }

/* ============== Pair (color contrast meta) ============== */
/* .pair / .pair__chip / .pair__txt / .pair__ratio defined in inline brandbook styles */

/* ============== Section opener ============== */
/* .opener / .opener__num / .opener__title / .opener__intro / .opener__meta defined inline */

/* ============== Frame (browser/window mock) ============== */
.frame {
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid hsl(20 15% 15% / 0.1);
  background: var(--cream);
  box-shadow: var(--shadow-2);
}
.frame__bar {
  height: 36px;
  background: var(--cream-deeper);
  border-bottom: 1px solid hsl(20 15% 15% / 0.08);
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}
.frame__bar::before {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: hsl(20 15% 15% / 0.18);
  box-shadow: 16px 0 0 hsl(20 15% 15% / 0.18), 32px 0 0 hsl(20 15% 15% / 0.18);
  margin-right: 28px;
}
.frame__url {
  flex: 1; text-align: center;
  background: var(--cream); border: 1px solid hsl(20 15% 15% / 0.08);
  border-radius: 999px; padding: 4px 12px;
  max-width: 360px;
}

/* ============== Metric / proof block ============== */
.metric { padding-bottom: var(--s-3); }
.metric__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 1; letter-spacing: -0.02em;
  color: var(--burgundy-500);
}
.metric__label { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ============== Misuse ============== */
.misuse { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.misuse__cell {
  aspect-ratio: 1;
  border-radius: var(--r-3);
  background: var(--cream-deep);
  border: 1px solid hsl(20 15% 15% / 0.08);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--ink);
}
.misuse__cell::after {
  content: "";
  position: absolute; inset: 16px;
  border: 1px dashed hsl(0 60% 45% / 0.55);
  border-radius: var(--r-2);
  pointer-events: none;
}
.misuse__caption {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--danger);
  text-align: center;
}

/* ============== Placeholder image ============== */
.ph {
  background:
    linear-gradient(45deg, hsl(20 15% 15% / 0.06) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(-45deg, hsl(20 15% 15% / 0.06) 25%, transparent 25%) 0 0/14px 14px,
    var(--cream-deep);
  border-radius: var(--r-2);
  width: 100%;
  height: 100%;
  min-height: 80px;
}

/* ============== Print fallback for screen view ============== */
@media (max-width: 1180px) {
  .doc { padding: 24px 0; }
  .page { width: calc(100vw - 32px); padding: 48px 32px; min-height: auto; }
  .t-display-xl { font-size: 96px; }
  .t-display-l  { font-size: 64px; }
  .t-display-m  { font-size: 48px; }
  .t-h1 { font-size: 40px; }
}