/* Design tokens — single source of truth for color values.
   Same token names used in JSX (the D1 object in direction1.jsx) and in CSS.
   If you change a value here, mirror it in direction1.jsx so React inline
   styles stay in sync. */

:root {
  --ab-bg:       #f0ede5;          /* page background */
  --ab-bg-alt:   #e8e4d6;          /* alternate slab background */
  --ab-ink:      #0d0d0d;          /* primary text */
  --ab-ink-soft: #3a3833;          /* body text */
  --ab-ink-mute: #7a7669;          /* eyebrows, captions */
  --ab-rule:     rgba(13, 13, 13, .16);
  --ab-accent:   #1a1a1a;

  /* dark slab */
  --ab-dark-bg:       #0d0d0d;
  --ab-dark-ink:      #f0ede5;
  --ab-dark-ink-soft: #c8c4b8;
  --ab-dark-ink-mute: #7a7669;
  --ab-dark-rule:     rgba(240, 237, 229, .16);
}

::selection { background: var(--ab-ink); color: var(--ab-bg); }

html, body { margin: 0; padding: 0; background: var(--ab-bg); }
html { scroll-behavior: smooth; }
body { font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif; }