/* ============================================================
   Theme — Colors
   Two layers, modeled on Ignite's theme/colors.ts:

   1. PALETTE  — raw color values. The only place a hex code
      should ever appear. Never reference --palette-* directly
      in component or page styles.
   2. SEMANTIC — names that describe *purpose* (text, border,
      accent). All other CSS uses these. To re-theme the site,
      change what the semantic tokens point to.
   ============================================================ */

:root {
  /* ---------- 1. PALETTE ---------- */

  /* Neutrals, light → dark */
  --palette-neutral-100: #ffffff;
  --palette-neutral-200: #fafafa;
  --palette-neutral-300: #f5f5f5;
  --palette-neutral-350: #eeeeee;
  --palette-neutral-400: #dddddd;
  --palette-neutral-500: #cccccc;
  --palette-neutral-600: #888888;
  --palette-neutral-650: #666666;
  --palette-neutral-700: #444444;
  --palette-neutral-750: #333333;
  --palette-neutral-800: #232323;
  --palette-neutral-850: #222222;
  --palette-neutral-900: #111111;
  --palette-black: #000000;

  /* Brand */
  --palette-primary: #1a5194;
  --palette-primary-dark: #143e72;
  --palette-tan: #fbf8f3;

  /* Status */
  --palette-error: #b00020;
  --palette-success: #137333;

  /* Data visualization (artist network graph) */
  --palette-viz-blue: #3b82f6;
  --palette-viz-green: #10b981;

  /* ---------- 2. SEMANTIC TOKENS ---------- */

  /* Accent / brand */
  --color-accent: var(--palette-primary);
  --color-accent-hover: var(--palette-primary-dark);

  /* Text */
  --color-body-text: var(--palette-neutral-800);
  --color-heading-text: var(--palette-neutral-900);
  --color-text: var(--palette-neutral-900);
  --color-heading: var(--palette-neutral-900);
  --color-heading-muted: var(--palette-neutral-700);
  --color-subtle-text: var(--palette-neutral-650);
  --color-text-muted: var(--palette-neutral-650);
  --color-gray-text: var(--palette-neutral-750);
  --color-link: var(--palette-neutral-850);

  /* Legacy aliases (prefer the names above in new code) */
  --color-black: var(--palette-neutral-900);
  --color-dark-gray: var(--palette-neutral-850);
  --color-white: var(--palette-neutral-100);
  --color-light-gray: var(--palette-neutral-400);

  /* Backgrounds */
  --color-bg: var(--palette-neutral-100);
  --color-bg-card: var(--palette-neutral-100);
  --color-bg-subtle: var(--palette-neutral-200);
  --color-background: var(--palette-neutral-300);
  --color-background-light: var(--palette-neutral-300);
  --color-background-tan: var(--palette-tan);

  /* Borders & dividers */
  --color-border: var(--palette-neutral-500);
  --color-divider: var(--palette-neutral-350);

  /* Status */
  --color-error: var(--palette-error);
  --color-success: var(--palette-success);

  /* Artist network graph */
  --color-viz-influence: var(--palette-viz-blue);
  --color-viz-listens: var(--palette-viz-green);

  /* Dark header / footer region */
  --header-bg: var(--palette-black);
  --text-light: var(--palette-neutral-100);
  --text-muted: var(--palette-neutral-500);
}