/* ==========================================================================
   Nucleon DSHS Translation — design tokens
   Brand system: .claude/skills/nucleon-ux (tokens sampled from Figma
   frames + reconciled against nucleonaudio.com theme CSS). Primary font
   is Inter (SIL OFL) — license-clean substitute for SF Pro Display, which
   nucleonaudio.com uses but can't ship in a customer-facing web app.
   ========================================================================== */
:root {
  /* ---- Brand ---- */
  --nc-espresso:        #381F00;  /* app bar, H1 headings, logo mark */
  --nc-caramel:         #CBA06C;  /* primary buttons — canonical brand "skin" */
  --nc-caramel-hover:   #B98A52;
  --nc-blue:            #4D6ECF;  /* Microsoft sign-in + ACCENT focus ring */
  --nc-blue-hover:      #3E5DBE;
  --nc-copper:          #826444;  /* canonical Nucleon brand hex (logo/"Copper") */

  /* ---- Text ---- */
  --nc-text:            #183B56;  /* primary navy — headings, message text */
  --nc-text-muted:      #5A7184;  /* labels, subtitles, timestamps */
  --nc-text-on-dark:    #FFFFFF;
  --nc-text-on-accent:  #FFFFFF;

  /* ---- Surfaces ---- */
  --nc-bg:              #FFFFFF;
  --nc-surface:         #F6F5F3;  /* section / panel (warm off-white) */
  --nc-surface-2:       #FBFAF9;  /* cards */
  --nc-field:           #F2F0ED;  /* inputs, selects */
  --nc-border:          #ECEBEA;  /* card / panel hairline */
  --nc-border-field:    #CED3DE;  /* input border (cool gray) */

  /* ---- Message bubbles ---- */
  --nc-bubble-worker:   #ECEEEF;
  --nc-bubble-visitor:  #E5EBF1;

  /* ---- Status ---- */
  --nc-live:            #2E9C6C;  /* "Live" dot (darkened for AA text) */
  --nc-live-dot:        #36B37E;
  --nc-warn:            #604321;
  --nc-warn-border:     #9D8B76;
  --nc-warn-bg:         #FBF6EF;

  /* ---- Pills / secondary ---- */
  --nc-pill:            #EDE9E4;
  --nc-secondary:       #E4DDD4;
  --nc-secondary-text:  #4A3B29;

  /* ---- Typography ---- */
  --nc-font:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nc-fs-h1: 48px; --nc-fw-h1: 800;
  --nc-fs-h2: 32px; --nc-fw-h2: 700;
  --nc-fs-h3: 28px; --nc-fw-h3: 700;
  --nc-fs-body: 16px;
  --nc-fs-label: 14px;
  --nc-fs-small: 13px;
  --nc-fs-button: 16px;

  /* ---- Spacing ---- */
  --nc-sp-1: 4px; --nc-sp-2: 8px; --nc-sp-3: 12px;
  --nc-sp-4: 16px; --nc-sp-6: 24px; --nc-sp-8: 32px; --nc-sp-12: 48px;
  --nc-field-h: 56px;
  --nc-maxw: 1180px;

  /* ---- Radii ---- */
  --nc-r-sm: 6px; --nc-r-md: 8px; --nc-r-lg: 16px; --nc-r-pill: 999px;

  /* ---- Shadows ---- */
  --nc-shadow-sm:   0 1px 3px rgba(56,31,0,.06);
  --nc-shadow-card: 0 2px 12px rgba(56,31,0,.06);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--nc-font);
  font-size: var(--nc-fs-body);
  line-height: 1.5;
  color: var(--nc-text);
  background: var(--nc-bg);
  -webkit-font-smoothing: antialiased;
}

/* Focus ring (WCAG 2.1 AA) */
:focus-visible {
  outline: 2px solid var(--nc-blue);
  outline-offset: 2px;
  border-radius: var(--nc-r-sm);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}