/* PixelLoom — Color tokens
   Base palette lifted verbatim from the Stitch/PixelLoom "Cyber-Circuit"
   Material-tonal spec (stitch_pixelloom_app_portfolio/DESIGN.md), plus
   semantic aliases matched to how the marketing site (code.html) actually
   uses them. Obsidian neutrals + a single neon-cyan power source. */

:root {
  /* ---- Base: Obsidian (neutral) ---- */
  --pl-obsidian-950: #0b0f13;
  --pl-obsidian-900: #101418;
  --pl-obsidian-850: #181c20;
  --pl-obsidian-800: #1c2024;
  --pl-obsidian-750: #262a2f;
  --pl-obsidian-700: #31353a;
  --pl-obsidian-600: #363a3e;
  --pl-obsidian-500: #2d3135;

  --pl-mist-400: #849396;
  --pl-mist-600: #3b494c;
  --pl-fog-100: #e0e2e8;
  --pl-fog-300: #bac9cc;

  /* ---- Base: Cyan (primary / brand power source) ---- */
  --pl-cyan-100: #c3f5ff;
  --pl-cyan-200: #9cf0ff;
  --pl-cyan-300: #75d5e2;
  --pl-cyan-350: #92f1fe;
  --pl-cyan-400: #00daf3;
  --pl-cyan-500: #00e5ff;
  --pl-cyan-700: #00818d;
  --pl-cyan-800: #004f58;
  --pl-cyan-900: #00363d;
  --pl-cyan-950: #001f24;

  /* ---- Base: Cyber Green (tertiary / success / optimized) ---- */
  --pl-green-300: #bcff90;
  --pl-green-500: #6cec00;
  --pl-green-600: #67e100;
  --pl-green-700: #2b6600;
  --pl-green-900: #153800;

  /* ---- Base: Error ---- */
  --pl-red-300: #ffb4ab;
  --pl-red-800: #93000a;
  --pl-red-900: #690005;

  /* ---- Semantic: surfaces ---- */
  --surface-app: var(--pl-obsidian-900);
  --surface-sunken: var(--pl-obsidian-950);
  --surface-1: var(--pl-obsidian-850);
  --surface-2: var(--pl-obsidian-800);
  --surface-3: var(--pl-obsidian-750);
  --surface-4: var(--pl-obsidian-700);
  --surface-bright: var(--pl-obsidian-600);
  --surface-inverse: var(--pl-fog-100);

  /* ---- Semantic: text ---- */
  --text-heading: var(--pl-cyan-100);      /* headline/display copy */
  --text-primary: var(--pl-fog-100);       /* body copy on dark */
  --text-secondary: var(--pl-fog-300);     /* de-emphasized body copy */
  --text-muted: var(--pl-mist-400);
  --text-inverse: var(--pl-obsidian-900);  /* text on light/cyan fills */

  /* ---- Semantic: brand / accent ---- */
  --brand-accent: var(--pl-cyan-500);          /* button fills, active glow */
  --brand-accent-strong: var(--pl-cyan-400);   /* surface-tint / hover glow */
  --brand-accent-soft: var(--pl-cyan-100);     /* headings, light emphasis */
  --brand-on-accent: var(--pl-cyan-800);       /* text/icons on cyan fills */
  --brand-secondary: var(--pl-cyan-300);       /* secondary accents */
  --brand-success: var(--pl-green-300);
  --brand-success-strong: var(--pl-green-500);
  --brand-error: var(--pl-red-300);

  /* ---- Semantic: borders & lines ---- */
  --border-hairline: rgba(0, 229, 255, 0.10);
  --border-hairline-strong: rgba(0, 229, 255, 0.20);
  --border-outline: var(--pl-mist-400);
  --border-outline-variant: var(--pl-mist-600);

  /* ---- Semantic: glow / bloom ---- */
  --glow-accent: rgba(0, 229, 255, 0.3);
  --glow-accent-soft: rgba(0, 229, 255, 0.1);
}