/* ==========================================================================
   Null Productions — design tokens
   --------------------------------------------------------------------------
   TIER 1 is the brand palette: monochrome. White, black and neutral greys,
   no accent hue. The photos supply all the color. Two sets:
     - dark (default): the concerts/nightlife site, built around the purple-lit
       rig photos.
     - light (.theme-light on <body>): the speaking-engagements / private-events
       page, with neutral-graded photos.
   When the palette changes, change it HERE and nowhere else.

   TIER 2 maps that palette onto semantic roles. Every other stylesheet uses
   ONLY tier-2 names, so a theme is just a different tier-2 mapping.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ---------- TIER 1 — dark palette ---------- */
  --np-black:      #0E0E0F;   /* page */
  --np-coal:       #161618;   /* raised panels */
  --np-coal-hi:    #1F1F22;   /* hover */
  --np-white:      #F2F2F0;   /* text, primary fills (17.2:1 on page) */
  --np-ash:        #A1A1A6;   /* muted text (7.5:1 on page, 6.4:1 on hover) */
  --np-rule:       #27272A;
  --np-rule-firm:  #66666B;   /* control outlines (3.4:1 on page, 3.2:1 on panels) */

  /* ---------- TIER 1 — light palette (private-events page) ---------- */
  --np-paper:      #F5F4F0;   /* page */
  --np-card:       #FFFFFF;   /* raised panels */
  --np-card-hi:    #ECEAE4;   /* hover */
  --np-ink:        #141416;   /* text, primary fills (16.7:1 on page) */
  --np-graphite:   #55565B;   /* muted text (6.7:1 on page, 6.1:1 on hover) */
  --np-rule-lt:    #DEDCD6;
  --np-rule-lt-firm: #8A877F; /* control outlines (3.3:1 on page, 3.6:1 on panels) */

  /* Home hero photo grade only: the photo goes greyscale and these multiply
     over it (blue top-left, pink, green bottom-right). Never used for UI. */
  --np-grade-blue:  #4A63FF;
  --np-grade-pink:  #FF4FB0;
  --np-grade-green: #2FE0A0;

  /* Lightbox backdrop only. Never laid behind text. */
  --np-dim:        rgb(0 0 0 / .78);

  /* ---------- Typefaces ----------
     Self-hosted from /fonts (SIL Open Font License). Plex Sans for all text;
     Plex Mono only for numbers and spec values. */
  --np-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --np-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- TIER 2 — semantic roles (dark) ---------- */
  --surface:        var(--np-black);
  --surface-raised: var(--np-coal);
  --surface-hover:  var(--np-coal-hi);
  --text:           var(--np-white);
  --text-muted:     var(--np-ash);
  --border:         var(--np-rule);
  --border-strong:  var(--np-rule-firm);
  --brand:          var(--np-white);   /* monochrome: the "accent" is the ink itself */
  --brand-text:     var(--np-black);   /* text on a filled primary button */
  --focus:          var(--np-white);
  --dim:            var(--np-dim);
  --grade-1:        var(--np-grade-blue);
  --grade-2:        var(--np-grade-pink);
  --grade-3:        var(--np-grade-green);

  --font-display: var(--np-sans);
  --font-body:    var(--np-sans);
  --font-num:     var(--np-mono);

  /* ---------- Scale ---------- */
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --shell: 1200px;
  --radius: 2px;
  --section-y: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- TIER 2 — semantic roles (light) ---------- */
.theme-light {
  color-scheme: light;
  --surface:        var(--np-paper);
  --surface-raised: var(--np-card);
  --surface-hover:  var(--np-card-hi);
  --text:           var(--np-ink);
  --text-muted:     var(--np-graphite);
  --border:         var(--np-rule-lt);
  --border-strong:  var(--np-rule-lt-firm);
  --brand:          var(--np-ink);
  --brand-text:     var(--np-paper);
  --focus:          var(--np-ink);
}