/* colors.css — strict monochrome. Black, white, neutral grey ramp. No accent. */
:root {
  /* Neutral ramp (base scale) */
  --neutral-950: #0A0A0A;
  --neutral-900: #161616;
  --neutral-850: #1F1F1F;
  --neutral-800: #27272A;
  --neutral-700: #3F3F46;
  --neutral-600: #52525B;
  --neutral-500: #71717A;
  --neutral-400: #A1A1AA;
  --neutral-300: #D4D4D8;
  --neutral-200: #E4E4E7;
  --neutral-100: #F5F5F5;
  --neutral-050: #FAFAFA;
  --white: #FFFFFF;

  /* Brand anchors */
  --ink: #0A0A0A;    /* primary text, dark surfaces, CTA fill — the logo tile */
  --paper: #FFFFFF;  /* primary light background */

  /* Functional states — muted, used sparingly. Never neon. */
  --success: #16794C;
  --warning: #B45309;
  --error:   #B23A2E;

  /* ---- Semantic aliases (light, default) ---- */
  --text-strong: var(--neutral-950);
  --text-body:   var(--neutral-800);
  --text-muted:  var(--neutral-500);
  --text-inverse: var(--white);

  --surface-page:  var(--white);
  --surface-card:  var(--neutral-100);
  --surface-sunken: var(--neutral-100);
  --surface-inverse: var(--ink);

  --border-hairline: var(--neutral-200);
  --border-strong:   var(--neutral-950);

  --cta-fill: var(--ink);
  --cta-text: var(--white);
  --focus-ring: var(--ink);
}

/* Dark mode — the logo's native habitat. Scope: [data-theme="dark"]. */
[data-theme="dark"] {
  --text-strong: var(--neutral-050);
  --text-body:   var(--neutral-300);
  --text-muted:  var(--neutral-400);
  --text-inverse: var(--ink);

  --surface-page:  var(--neutral-950);
  --surface-card:  var(--neutral-900);
  --surface-sunken: var(--neutral-850);
  --surface-inverse: var(--white);

  --border-hairline: #262626;
  --border-strong:   var(--neutral-050);

  --cta-fill: var(--white);
  --cta-text: var(--ink);
  --focus-ring: var(--white);
}