/* =========================================================
   Consonant Ventures — Colors & Type
   ---------------------------------------------------------
   Brand foundations:
   - Two-tone: deep near-black background, warm cream foreground.
   - Single typeface: Baskervville (serif), used at all sizes.
   - Italic is the brand's editorial voice for emphasis.
   - No accent color in the marketing surface — restraint is the brand.
   ========================================================= */

/* --------- Web fonts --------- */
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("fonts/Baskervville-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color tokens (raw) ---------- */
  /* Ink — the deep field the brand lives on. Not pure #000; subtly warm. */
  --ink-900: #0a0a09;
  --ink-800: #131311;
  --ink-700: #1c1c1a;
  --ink-600: #2a2a26;

  /* Cream — the warm off-white. Sampled from SQUARE-BLACK.png (≈ #E5E2D6). */
  --cream-50:  #f4f1e6;
  --cream-100: #ece8d9;  /* Default foreground on ink */
  --cream-200: #e5e2d6;  /* Logo cream */
  --cream-300: #d6d2c2;
  --cream-400: #b8b3a0;
  --cream-500: #908b78;

  /* Bone — paper-like surface for inverted (light) contexts */
  --bone-50:  #faf8f1;
  --bone-100: #f4f1e6;
  --bone-200: #ece8d9;

  /* Hairline — subtle dividers on dark surfaces */
  --hairline-on-ink:   rgba(236, 232, 217, 0.14);
  --hairline-on-cream: rgba(10, 10, 9, 0.12);

  /* ---------- Semantic surface / foreground ---------- */
  --bg:        var(--ink-900);
  --bg-raised: var(--ink-800);
  --bg-inset:  var(--ink-700);

  --fg:        var(--cream-100);
  --fg-muted:  var(--cream-300);
  --fg-subtle: var(--cream-400);
  --fg-faint:  var(--cream-500);

  --rule:      var(--hairline-on-ink);
  --rule-strong: rgba(236, 232, 217, 0.28);

  /* Inverted (light) palette — used sparingly for press / decks */
  --bg-light:  var(--bone-100);
  --fg-on-light: var(--ink-900);
  --fg-on-light-muted: #4a4a44;

  /* ---------- Type ---------- */
  --font-serif: "Baskervville", "Baskerville", "Libre Baskerville", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — deliberately small set; brand prefers restraint.
     Sizes feel editorial; line-heights tight on display, generous on body. */
  --fs-display: clamp(56px, 7vw, 112px);
  --fs-h1:      clamp(40px, 4.4vw, 64px);
  --fs-h2:      clamp(28px, 2.8vw, 40px);
  --fs-h3:      22px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  --tracking-display: -0.02em;  /* slight optical tightening */
  --tracking-body:    0;
  --tracking-eyebrow: 0.18em;   /* small caps / eyebrow labels */

  /* ---------- Spacing (8pt-ish, looser than typical) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* ---------- Radii — minimal. Brand prefers hard edges. ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- Shadows — also minimal; brand is matte, not glossy ---------- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 12px 40px -16px rgba(0,0,0,0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* =========================================================
   Semantic element styles
   Use these as the default voice — override sparingly.
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.cv-display, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;          /* signature: italic display */
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h1, .cv-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h2, .cv-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg);
}

h3, .cv-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg);
}

p, .cv-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.cv-lead {
  font-size: 22px;
  line-height: 1.45;
  font-style: italic;
  color: var(--fg);
}

.cv-small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.cv-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-faint);
}

a, .cv-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--fg-faint);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a:hover, .cv-link:hover {
  text-decoration-color: var(--fg);
}

hr, .cv-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--cream-200);
  color: var(--ink-900);
}