/* Palette 01 — Site Signal. Ratio discipline: 60 ink / 25 paper / 10 steel / 5 signal. */
:root {
  /* Base */
  --nx-ink: #101113;
  --nx-paper: #FAF9F6;
  --nx-white: #FFFFFF;
  --nx-steel: #6B7076;
  --nx-steel-light: #9AA0A6;
  --nx-rule: #E4E2DC;
  --nx-rule-dark: #2A2C30;
  --nx-signal: #FF4B12;

  /* Semantic surfaces */
  --nx-surface: var(--nx-paper);
  --nx-surface-raised: var(--nx-white);
  --nx-surface-inverse: var(--nx-ink);

  /* Semantic text */
  --nx-text: var(--nx-ink);
  --nx-text-muted: var(--nx-steel);
  --nx-text-inverse: var(--nx-paper);
  --nx-text-inverse-muted: var(--nx-steel-light);
  --nx-text-signal: var(--nx-signal);

  /* Semantic lines. Structure is hairlines, never shadows. */
  --nx-hairline: 1px solid var(--nx-rule);
  --nx-hairline-inverse: 1px solid var(--nx-rule-dark);
  --nx-rule-heavy: 1px solid var(--nx-ink);
  --nx-underscore: 2px solid var(--nx-ink);

  /* Interaction. Ink and signal trade places; nothing fades. */
  --nx-action-bg: var(--nx-signal);
  --nx-action-fg: var(--nx-white);
  --nx-action-bg-hover: var(--nx-ink);
  --nx-action-ghost-border: var(--nx-steel);
  --nx-focus-ring: 2px solid var(--nx-signal);
}

[data-theme="dark"] {
  --nx-surface: var(--nx-ink);
  --nx-surface-raised: var(--nx-ink);
  --nx-surface-inverse: var(--nx-paper);
  --nx-text: var(--nx-paper);
  --nx-text-muted: var(--nx-steel-light);
  --nx-text-inverse: var(--nx-ink);
  --nx-text-inverse-muted: var(--nx-steel);
  --nx-rule: var(--nx-rule-dark);
  --nx-rule-heavy: 1px solid var(--nx-paper);
  --nx-underscore: 2px solid var(--nx-paper);
  --nx-action-bg-hover: var(--nx-paper);
}