/* === FONTS (self-hosted) === */
@font-face {
  font-family: 'VT323';
  src: url('../assets/fonts/vt323.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../assets/fonts/silkscreen.woff2') format('woff2');
  font-display: swap;
}

/* ============================================================
   DESIGN v2 — "dark MySpace band-page skin"
   The page is bagel's heavily-customized profile on the
   swaglordvader anonymous marketplace. MySpace table grammar
   (blue platform family + orange content family) mapped onto a
   dark chassis. Verdana everywhere. No glow, no scanlines, no
   terminal-green monoculture. See Plans/BRAINSTORM_v2.md.
   ============================================================ */

:root {
  /* --- chassis --- */
  --body-bg: #0b0b0e;        /* under the collage wall */
  --panel-bg: #16161b;       /* the content well (the "white" of the page) */
  --surface-bg: #1b1b22;     /* module bodies */
  --box-bg: #191920;
  --border-dim: #2e2e38;
  --border-mid: #3d3d4a;
  --border-hard: #4a4a58;

  /* --- platform blue family (MySpace #003399/#6699cc mapped dark) --- */
  --plat-bar: #182850;       /* topbar */
  --plat-bar-edge: #0a1228;
  --plat-nav: #2a3f73;       /* nav strip */
  --blue-hd: #1f2d52;        /* blue module header cell */
  --blue-hd-text: #a8c4f4;
  --blue-cell-a: #1a2440;    /* label column */
  --blue-cell-b: #141b30;    /* value column */
  --blue-cell-border: #2a3a66;
  --blue-label-text: #8fb3f2;

  /* --- content orange family (MySpace #ffcc99/#ff6600 mapped dark) --- */
  --or-hd: #4a2b10;          /* orange module header cell */
  --or-hd-text: #ffb25c;
  --or-cell-a: #3a2410;      /* author/label cell */
  --or-cell-b: #241a10;      /* body cell */
  --or-border: #33271a;
  --or-text: #e8d2b8;

  /* --- links (platform-wide) --- */
  --link: #8fb3f2;
  --link-visited: #a89bdc;
  --link-hover: #ffb25c;

  /* --- accents, role-locked --- */
  --red: #cc2222;
  --red-bright: #ff5c5c;     /* prices + alerts only */
  --hot-pink: #ff77aa;       /* luv only */
  --yellow: #ffd24a;         /* scores/rank only */
  --green-live: #57c957;     /* ONLINE dot + hit counter + player internals only */
  --green-bright: #57c957;   /* legacy alias (player/terminal artifacts) */
  --orange: #ff6600;
  --cyan: #6fd9e8;           /* avatar zone */

  /* Newgrounds amber (game zone; verified warm 2005 palette) */
  --ng-orange: #fca238;
  --ng-orange-hot: #ff7700;

  /* legacy color aliases still referenced by retro.css */
  --green: #3d6b1e;
  --green-dark: #1a3d0a;
  --green-link: #6fae4e;
  --red-dark: #aa0000;
  --electric-blue: #8fb3f2;
  --lime: #57c957;
  --purple: #a89bdc;

  /* --- text --- */
  --white: #f2efe8;          /* paper (photo prints, network banner) */
  --off-white: #e8e4dc;
  --light-gray: #d4d0c8;
  --gray: #a0a0a0;
  --dark-gray: #555555;
  --black: #101014;
  --text-primary: #d8d8de;
  --text-muted: #a9a9b4;
  --text-dim: #70707c;

  /* --- depth: hard era shadows only --- */
  --box-shadow: 2px 2px 0 rgba(0,0,0,0.55);
  --inset-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);

  /* --- type roles --- */
  --font: Verdana, Geneva, Tahoma, sans-serif;       /* platform body */
  --font-sans: Verdana, Geneva, Tahoma, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;    /* terminal artifacts only */
  --font-pixel: 'VT323', 'Courier New', monospace;   /* scores + counter only */
  --font-badge: 'Silkscreen', 'Courier New', monospace; /* 88x31 badges only */

  /* TYPE SCALE — unchanged roles (DESIGN_CONTRACT sec 1) */
  --t-xs: 9px;
  --t-base: 11px;
  --t-md: 13px;
  --t-lg: 16px;
  --t-xl: 22px;
  --t-display: 32px;
  --fs: var(--t-base);
  --fs-sm: var(--t-xs);
  --fs-lg: var(--t-md);
  --fs-xl: var(--t-lg);

  /* SPACING — 4px grid (2px hairline allowed) */
  --s-2: 2px;
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;

  /* legacy gradient tokens: flattened. Controls keep a soft bevel pair. */
  --grad-header: linear-gradient(180deg, #23232b, #1b1b21);
  --grad-control: linear-gradient(180deg, #3e3e4a, #26262e);

  --site-width: 980px;
  --sidebar-width: 185px;

  /* default zone accent + dead glow (glow is OFF site-wide via transparent) */
  --accent: var(--link);
  --accent-dim: #1f2d52;
  --accent-glow: rgba(0,0,0,0);
}

/* === SECTION ZONES (one accent per zone; glow stays dead) === */
[data-theme="ng"] {
  --accent: var(--ng-orange);
  --accent-dim: #4a2c08;
}

[data-theme="myspace"] {
  --accent: var(--or-hd-text);
  --accent-dim: var(--or-hd);
}

[data-theme="cn"] {
  --accent: var(--cyan);
  --accent-dim: #15414b;
}

[data-theme="silkroad"] {
  --accent: var(--link);
  --accent-dim: var(--blue-hd);
}