/* tokens.css — ManAhead design tokens (from DESIGN.md + the final comp) and a
   base reset. Every colour/size below is lifted from the approved design so the
   built site renders pixel-identical to ManAhead.dc.html. */

:root {
  /* ---- colour ---- */
  --bg: #0E0F0D;              /* page background — "infinite depth" */
  --surface: #131412;         /* cards / alternating sections */
  --surface-dash: #16170f;    /* dashboard cards */
  --accent: #C8F44A;          /* acid lime — actions & highlights only */
  --accent-30: rgba(200, 244, 74, .3);
  --accent-20: rgba(200, 244, 74, .2);
  --ink: #000;                /* text on the acid lime */

  --text: #e4e2de;
  --text-70: rgba(228, 226, 222, .7);
  --text-60: rgba(228, 226, 222, .6);
  --text-50: rgba(228, 226, 222, .5);
  --text-35: rgba(228, 226, 222, .35);

  --border: rgba(255, 255, 255, .05);
  --border-2: rgba(255, 255, 255, .08);
  --border-3: rgba(255, 255, 255, .1);
  --input-border: #2A2B28;
  --star-off: #3a3c33;

  /* ---- type ---- */
  --font-display: 'Bebas Neue', sans-serif;   /* headings, always uppercase */
  --font-body: 'Archivo Narrow', sans-serif;  /* body / UI */

  /* ---- shape & rhythm ---- */
  --r-sm: 3px;
  --r: 4px;
  --maxw: 1280px;
  --pad-x: 64px;      /* desktop outer margin */
  --section-y: 96px;  /* vertical breathing room between sections */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body), sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; }

a { color: inherit; }

/* Material Symbols glyph helper (matches the comp's .msym). */
.msym {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
}

/* Tablet + mobile: tighten the outer margins and section spacing.
   DESIGN.md calls for 20px mobile margins vs 64px on desktop. */
@media (max-width: 900px) {
  :root { --pad-x: 32px; --section-y: 64px; }
}
@media (max-width: 560px) {
  :root { --pad-x: 20px; --section-y: 48px; }
}