/* =============================================================
   Penumbra — Color tokens
   Monochromatic by design. Hierarchy is built from value, not hue.
   Surfaces step up ~6% in lightness per tier. One warm-white accent.
   ============================================================= */

:root {
  /* Base scale — named tones */
  --obsidian: #08080a;   /* page + root surface */
  --graphite: #101013;   /* elevated cards + panels */
  --slate: #17171c;      /* inset fields, code, recessed regions */
  --onyx-raised: #1b1b21;/* floating menus, hover states */
  --hairline: #23232a;   /* default 1px border */
  --hairline-strong: #2e2e36; /* emphasis border */
  --tertiary: #5c6068;   /* muted helper / disabled */
  --moonstone: #9ba0ab;  /* secondary text */
  --vellum: #f4f4f5;     /* primary text / high-contrast fg */
  --beacon: #e8e5dc;     /* warm-white accent */
  --beacon-hover: #ffffff;

  /* Semantic — surfaces */
  --color-background: var(--obsidian);
  --color-surface: var(--graphite);
  --color-surface-inset: var(--slate);
  --color-surface-raised: var(--onyx-raised);

  /* Semantic — borders */
  --color-border: var(--hairline);
  --color-border-strong: var(--hairline-strong);

  /* Semantic — foreground */
  --color-on-surface: var(--vellum);
  --color-on-surface-muted: var(--moonstone);
  --color-on-surface-faint: var(--tertiary);

  /* Semantic — accent */
  --color-primary: var(--beacon);
  --color-primary-hover: var(--beacon-hover);
  --color-on-primary: var(--obsidian);
  --color-focus: var(--beacon);
  --color-focus-ring: rgba(232, 229, 220, 0.18);
  --color-focus-glow: rgba(232, 229, 220, 0.08);

  /* Semantic — feedback (reserved, used sparingly) */
  --color-error: #e47c7c;
  --color-success: #b6c9a8;
}