/* Nocturnal Music — Design tokens
   Single source of truth for color, type, spacing, and radii.
   Reference these everywhere via var(--nm-*).
*/

:root {
  /* Palette */
  --nm-bg:        #FAFAF7;   /* page background, warm off-white */
  --nm-paper:    #F4F1E8;    /* slightly darker neutral, used for inset panels */
  --nm-ink:        #0A0A0A;  /* primary text / dark UI surfaces */
  --nm-mute:       #6B6962;  /* secondary text */
  --nm-rule:       #E6E2D6;  /* thin dividers / borders */
  --nm-rule-strong: rgba(10, 10, 10, 0.18);
  --nm-card:       #FFFFFF;
  --nm-yellow:     #F5C518;  /* brand moon yellow — accents only */
  --nm-blue:       #1E2BAF;  /* brand blue — links / hover state */

  /* Type */
  --nm-font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nm-font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (modular, 1.25 ratio at the body end) */
  --nm-fs-eyebrow: 0.6875rem;  /* 11px — mono labels, all-caps */
  --nm-fs-meta:    0.8125rem;  /* 13px — mono small */
  --nm-fs-body:    1rem;       /* 16px */
  --nm-fs-lead:    1.25rem;    /* 20px — intro paragraphs */
  --nm-fs-h4:      1.75rem;    /* 28px */
  --nm-fs-h3:      2.25rem;    /* 36px */
  --nm-fs-h2:      3rem;       /* 48px */
  --nm-fs-h1:      4.5rem;     /* 72px — page titles */
  --nm-fs-hero:    6.5rem;     /* 104px — home hero */

  /* Type detail */
  --nm-tracking-tight:  -0.045em;  /* hero */
  --nm-tracking-display: -0.03em;  /* h1 / h2 */
  --nm-tracking-eyebrow: 0.14em;   /* mono caps */

  /* Spacing scale (4px base) */
  --nm-sp-1:  4px;
  --nm-sp-2:  8px;
  --nm-sp-3: 12px;
  --nm-sp-4: 16px;
  --nm-sp-5: 24px;
  --nm-sp-6: 32px;
  --nm-sp-8: 48px;
  --nm-sp-10: 64px;
  --nm-sp-12: 80px;
  --nm-sp-16: 96px;
  --nm-sp-20: 120px;

  /* Radii */
  --nm-radius-card:  4px;
  --nm-radius-tag:   2px;
  --nm-radius-pill: 999px;

  /* Motion */
  --nm-ease:        cubic-bezier(.2, .7, .3, 1);
  --nm-dur-fast:   150ms;
  --nm-dur:        220ms;

  /* Layout */
  --nm-container-pad: var(--nm-sp-10);  /* 64px */
  --nm-content-max:  1440px;            /* design width */
}

/* Dark mode hook — uncomment when adding a dark variant */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --nm-bg:   #0B0E18;
    --nm-ink:  #F2EFE6;
    ...
  }
}
*/