:root{
  /* Base Color Palette */
  --carbon-black:#181616ff;
  --celadon:#b8d5b8ff;
  --blue-slate:#5e6572ff;
  --spicy-paprika:#cf5c36ff;
  --platinum:#eef1efff;

  /* Legacy Aliases (keep for backward compatibility) */
  --bg: var(--platinum);
  --text: var(--carbon-black);
  --muted: rgba(24,22,22,.68);
  --surface: rgba(255,255,255,.86);

  /* Typography Tokens */
  --font-weight-medium: 650;
  --font-weight-bold: 750;
  --font-weight-extra-bold: 850;
  --font-weight-black: 950;
  --font-weight-ultra: 1000;

  /* Breakpoint Tokens */
  --bp-mobile: 640px;
  --bp-tablet: 760px;
  --bp-desktop: 980px;
  --bp-wide: 1120px;

  /* Color Tokens - Semantic Opacity Levels */
  --text-primary: rgba(24,22,22,.92);
  --text-secondary: rgba(24,22,22,.78);
  --text-muted: rgba(24,22,22,.68);
  --text-subtle: rgba(24,22,22,.42);
  --text-border: rgba(24,22,22,.18);
  --text-border-soft: rgba(24,22,22,.10);

  --overlay-light: rgba(255,255,255,.92);
  --overlay-medium: rgba(255,255,255,.86);
  --overlay-soft: rgba(255,255,255,.60);
  --overlay-subtle: rgba(255,255,255,.20);

  /* Gradient Tokens */
  --gradient-celadon: radial-gradient(1100px 520px at 20% 18%, rgba(184,213,184,.50), transparent 60%);
  --gradient-paprika: radial-gradient(900px 520px at 82% 10%, rgba(207,92,54,.22), transparent 62%);
  --gradient-slate: linear-gradient(135deg, rgba(94,101,114,.22), rgba(94,101,114,.08));
  --gradient-white: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.10));

  /* Category Color Tokens */
  --cat-tools-bg: rgba(184,213,184,.55);
  --cat-tools-fg: rgba(24,22,22,.92);
  --cat-article-bg: rgba(238,142,83,.45);
  --cat-article-fg: rgba(24,22,22,.92);
  --cat-guides-bg: rgba(94,101,114,.35);
  --cat-guides-fg: rgba(24,22,22,.92);
  --cat-shop-bg: rgba(207,92,54,.45);
  --cat-shop-fg: rgba(24,22,22,.92);
  --cat-oneshots-bg: rgba(94,101,114,.35);
  --cat-oneshots-fg: rgba(24,22,22,.92);
  --cat-products-bg: rgba(52,152,219,.40);
  --cat-products-fg: rgba(24,22,22,.92);

  /* Layout Tokens */
  --radius: 6px;
  --radius-lg: 16px;

  --border: 1px solid rgba(24,22,22,.18);
  --border-soft: 1px solid rgba(24,22,22,.10);

  --shadow: 0 12px 30px rgba(0,0,0,.14);
  --shadow2: 0 22px 60px rgba(0,0,0,.20);

  --max: 1320px;
  --pad: 18px;

  --hero-spacing: 24px;

  --ease: 180ms cubic-bezier(.2,.8,.2,1);

  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
}