/* ─────────────────────────────────────────────────────────────
   pulse-theme.css — shared tokens + utility classes for
   brand guide, stationery guide, and decks. Light-mode default;
   .pulse-dark class flips to dark.
   ───────────────────────────────────────────────────────────── */

:root {
  /* — light palette — */
  --p-bg:        #F4EFE6;
  --p-surface:   #FFFFFF;
  --p-surface-2: #FBF7EE;
  --p-ink:       #1A1816;
  --p-ink-2:     #2E2A26;
  --p-muted:     #6B6660;
  --p-muted-2:   #A8A398;
  --p-hairline:  #E2DCC8;
  --p-divider:   #D6CFB8;
  --p-accent:    #E8623D;
  --p-accent-ink:#FFFFFF;
  --p-signal:    #6B8E3D;
  --p-warn:      #C99227;
  --p-chip-bg:   #1A1816;
  --p-chip-ink:  #F4EFE6;

  /* — Navigation sidebar (matches page tone in both modes) — */
  --p-nav-bg:        #F4EFE6;            /* light: cream, matches page */
  --p-nav-ink:       #1A1816;
  --p-nav-ink-muted: rgba(26, 24, 22, 0.62);
  --p-nav-hover-bg:  rgba(26, 24, 22, 0.05);
  --p-nav-hover-ink: #1A1816;            /* stays readable */
  --p-nav-active-bg: rgba(232, 98, 61, 0.10);
  --p-nav-active-ink:#E8623D;            /* clay */
  --p-nav-divider:   #E2DCC8;

  /* — radii / spacing — */
  --p-r-sm:  6px;
  --p-r-md:  10px;
  --p-r-lg:  18px;

  /* — type — */
  --p-font-display: 'Anton', 'Arial Narrow', sans-serif;
  --p-font-body:    'Space Grotesk', 'Helvetica Neue', sans-serif;
  --p-font-data:    'JetBrains Mono', 'Menlo', monospace;
}

.pulse-dark {
  --p-bg:        #14110D;
  --p-surface:   #1F1B14;
  --p-surface-2: #2A251C;
  --p-ink:       #F4EFE6;
  --p-ink-2:     #D6CFB8;
  --p-muted:     #8C8678;
  --p-muted-2:   #5A554A;
  --p-hairline:  #2E2920;
  --p-divider:   #3E3828;
  --p-accent:    #F47A50;
  --p-accent-ink:#14110D;
  --p-signal:    #A8C56D;
  --p-warn:      #E8B850;
  --p-chip-bg:   #F4EFE6;
  --p-chip-ink:  #14110D;

  /* — Navigation sidebar (dark mode: surface tone, readable hover) — */
  --p-nav-bg:        #1F1B14;            /* dark: ember surface */
  --p-nav-ink:       #F4EFE6;
  --p-nav-ink-muted: rgba(244, 239, 230, 0.62);
  --p-nav-hover-bg:  rgba(244, 239, 230, 0.06);
  --p-nav-hover-ink: #F4EFE6;            /* cream — NOT chip-ink (would be black) */
  --p-nav-active-bg: rgba(244, 122, 80, 0.10);
  --p-nav-active-ink:#F47A50;
  --p-nav-divider:   #2E2920;

  color-scheme: dark;
}

/* — base — */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--p-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* — typography utilities — */
.p-eyebrow {
  font-family: var(--p-font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--p-muted);
  text-transform: uppercase;
}
.p-eyebrow-accent {
  font-family: var(--p-font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--p-accent);
  text-transform: uppercase;
}
.p-data { font-family: var(--p-font-data); font-feature-settings: 'tnum'; }
.p-disp { font-family: var(--p-font-display); text-transform: uppercase; line-height: 0.92; letter-spacing: 0; }

/* — Logo lockup — */
.p-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--p-font-display);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
}
.p-logo .p-logo-iq {
  background: var(--p-accent);
  color: #fff;
  padding: 0 0.15em 0.06em;
  border-radius: 6px;
  margin-left: 0;
}
.p-logo.on-light .p-logo-m { color: var(--p-ink); }
.p-logo.on-dark  .p-logo-m { color: var(--p-chip-ink); }

/* — Buttons — */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--p-font-body); font-weight: 600; font-size: 14px;
  padding: 12px 22px; border-radius: var(--p-r-sm);
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.p-btn-primary  { background: var(--p-accent); color: #fff; }
.p-btn-primary:hover { filter: brightness(0.95); }
.p-btn-secondary{ background: var(--p-chip-bg); color: var(--p-chip-ink); }
.p-btn-ghost    { background: transparent; color: var(--p-ink); border: 1px solid var(--p-divider); }

/* — Surfaces — */
.p-card {
  background: var(--p-surface);
  border: 1px solid var(--p-hairline);
  border-radius: var(--p-r-md);
}
.p-card-elevated {
  background: var(--p-surface);
  border-radius: var(--p-r-lg);
  box-shadow: 0 1px 0 var(--p-hairline), 0 12px 30px -20px rgba(26, 24, 22, 0.18);
}
.p-hairline { height: 1px; background: var(--p-hairline); width: 100%; }
.p-divider-v { width: 1px; background: var(--p-hairline); }

/* — Pill chip — */
.p-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--p-font-body); font-size: 11px; font-weight: 600;
  border-radius: 999px;
  background: transparent; color: var(--p-muted);
  border: 1px solid var(--p-hairline);
}
.p-pill-solid { background: var(--p-chip-bg); color: var(--p-chip-ink); border: none; }
.p-pill-accent{ background: var(--p-accent); color: #fff; border: none; }

/* — Decorative big-IQ watermark — */
.p-watermark {
  font-family: var(--p-font-display);
  text-transform: uppercase;
  color: var(--p-accent);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  line-height: 0.82;
}

/* — Scrollbars — */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--p-divider); border-radius: 8px; }