:root {
  /* Ink (dark neutral base) */
  --color-ink-950: #0B0C0E;
  --color-ink-900: #15171B;
  --color-ink-800: #22252B;

  /* Signal (primary accent — electric purple) */
  --color-signal-400: #8B7CF6;
  --color-signal-500: #6C5CE7;
  --color-signal-600: #5445C7;

  /* Supporting accents — icons/data-viz only, never full sections */
  --color-x-black: var(--color-ink-950);
  --color-yt-red: #FF3B3B;
  --color-fb-blue: #3B82F6;
  --gradient-instagram: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);

  /* Warm neutral (light mode) */
  --color-paper-50: #FAF7F2;
  --color-paper-100: #F0EBE1;
  --color-charcoal-700: #2B2B2E;

  /* Neutral scale */
  --color-gray-100: #E7E7EA;
  --color-gray-300: #C7C9D1;
  --color-gray-500: #8A8D96;
  --color-gray-700: #4A4C52;

  /* Fonts */
  --font-display: "Clash Display", "General Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-standard: 320ms;

  /* Semantic — dark mode is the default */
  --bg: var(--color-ink-950);
  --bg-elevated: var(--color-ink-900);
  --bg-card: var(--color-ink-800);
  --text: #F4F3F7;
  --text-muted: var(--color-gray-300);
  --border: var(--color-ink-800);
  --accent: var(--color-signal-500);
  --accent-hover: var(--color-signal-400);
  --accent-active: var(--color-signal-600);
  --accent-text-on-dark: var(--color-signal-400); /* lighter tint for AA contrast on dark bg */
}

:root[data-theme="light"] {
  --bg: var(--color-paper-50);
  --bg-elevated: var(--color-paper-100);
  --bg-card: #FFFFFF;
  --text: var(--color-charcoal-700);
  --text-muted: var(--color-gray-700);
  --border: var(--color-gray-100);
  --accent: var(--color-signal-600);
  --accent-hover: var(--color-signal-500);
  --accent-active: var(--color-signal-600);
  --accent-text-on-dark: var(--color-signal-600);
}