/* VLGE — brand DNA tokens (provisional, mined from deck + logo kit) */
:root {
  /* Core palette (official logo colorways) */
  --haze:        #F8F4E3;   /* warm off-white — primary ink on dark */
  --haze-dim:    #cfcbbd;
  --white:       #ffffff;
  --midnight:    #2A2B2A;   /* warm near-black */
  --ink:         #141413;   /* deepest background */
  --ink-2:       #1c1c1a;
  /* ===== ACCENT — single tuning point (bottle green). Change these 3 lines to retune. ===== */
  --accent:      #1f7a55;   /* mid — fills, borders, dots, active */
  --accent-soft: #cfe6da;   /* tint — chips, soft backgrounds */
  --accent-deep: #0e5236;   /* deep — text, links, headings accent (readable on paper) */
  /* legacy aliases kept in sync so existing var(--mauve*) usages follow the accent */
  --mauve:       var(--accent);
  --mauve-soft:  var(--accent-soft);
  --mauve-deep:  var(--accent-deep);

  /* Data-chrome supports (used sparingly to gesture "data") */
  --grid:        rgba(248,244,227,0.10);
  --line:        rgba(248,244,227,0.16);
  --glass:       rgba(248,244,227,0.06);
  --glass-brd:   rgba(248,244,227,0.18);

  /* Type */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.0rem + 1vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --hero:    clamp(2.4rem, 1.3rem + 5vw, 5.7rem);

  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--haze);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; max-width: 100%; }

/* shared display utilities */
.u-mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }
.u-kicker {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mauve);
}
.u-display { font-family: var(--display); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; }