/* ============================================================================
   PETER DICKINSON VDL — BRAND LAYER
   Sits on top of tokens.css (Front End Brain). This file is the whole brand:
   the face (Aeonik Pro), the monochrome palette, and the page base.
   Load order: tokens.css → brand.css → patterns.css → your page css.
   ============================================================================ */
@import "tokens.css";

/* ---- Aeonik Pro (Cotype Foundry). Set ships Light/Regular/Bold + italics.
   No Medium/Semibold, so headings use Bold (700). ---- */
@font-face {
  font-family: "Aeonik Pro"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Light.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-RegularItalic.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-BoldItalic.otf") format("opentype");
}

/* ---- Brand tokens. Shared + light live in :root, dark in html.dark.
   Monochrome: accent IS ink. No colour anywhere in the chrome. ---- */
:root {
  --font: "Aeonik Pro", "Inter", ui-sans-serif, system-ui, sans-serif;
  --fw-head: 700;      /* Aeonik set has no 600; Bold carries labels */
  --fw-med: 400;       /* nor 500; fall to Regular */
  /* light theme */
  --bg: #f2f2f2;
  --bg-deep: #e6e6e6;
  --surface: #ffffff;
  --border: #d7d7d7;
  --ink: #141414;      /* labels, headings, reveal copy */
  --ink-mid: #3c3c3c;  /* entries, body */
  --ink-dim: #787878;  /* captions */
  --media: #d6d6d6;    /* placeholder image blocks */
  --pill-bg: #161616;  /* inverted pill / box (the one high-contrast element) */
  --pill-fg: #f2f2f2;
  --accent: #141414;
  --accent-fg: #f2f2f2;
}
html.dark {
  --bg: #060606;
  --bg-deep: #0f0f0f;
  --surface: #1c1c1c;
  --border: #2c2c2c;
  --ink: #f4f4f4;
  --ink-mid: #d3d3d3;
  --ink-dim: #8f8f8f;
  --media: #3d3d3d;
  --pill-bg: #e9e9e6;
  --pill-fg: #181818;
  --accent: #f4f4f4;
  --accent-fg: #181818;
}

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

/* ---- page base: fluid body size, generous asymmetric margins
   (more on the left so the label column has room to right-align) ---- */
body {
  background: var(--bg);
  color: var(--ink-mid);
  font-family: var(--font);
  font-size: clamp(14px, 1.02vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: clamp(72px, 13vh, 168px) clamp(24px, 6vw, 96px) 200px
    clamp(24px, 9vw, 180px);
  transition: background-color 400ms var(--e-out);
}

::selection { background: var(--accent); color: var(--accent-fg); }