/* =============================================================
   TENAX / IP PATHWAYS — BRAND THEME
   Single source of truth for the Tenax look across all courses
   and the training portal. Load this AFTER base.css so these
   :root tokens + patches win.

   Brand palette: bg #181818 · card #242424 · border #3d3020 · gold #ef910a
   See brand.md for the human-readable branding guide.
   ============================================================= */

:root {
  /* Backgrounds & surfaces */
  --color-bg:             #181818;
  --color-bg-warm:        #1f1f1f;
  --color-surface:        #242424;
  --color-surface-warm:   #2a2a2a;
  /* --color-bg-code stays Catppuccin #1E1E2E (code blocks are already dark) */

  /* Text & borders */
  --color-text:           #eaeaea;
  --color-text-secondary: #c4b8a8;
  --color-text-muted:     #9a8e7e;
  --color-border:         #3d3020;
  --color-border-light:   #2b2418;

  /* Accent — Tenax gold. accent-light/muted are only ever bg/border tints. */
  --color-accent:         #ef910a;
  --color-accent-hover:   #ffa524;
  --color-accent-light:   #3a2c0a;
  --color-accent-muted:   #c79a4a;

  /* Semantic (tuned for legibility on dark; *-light are dark tints) */
  --color-success:        #34a263;
  --color-success-light:  #14361f;
  --color-error:          #d9534f;
  --color-error-light:    #3d1717;
  --color-info:           #3f9fc4;
  --color-info-light:     #16324d;

  /* Actor colors — five distinct hues, vivid on dark */
  --color-actor-1:        #e8714f;
  --color-actor-2:        #3f9fc4;
  --color-actor-3:        #9486c9;
  --color-actor-4:        #d9b24a;
  --color-actor-5:        #34a263;

  /* Shadows — stronger on near-black so cards keep depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.50);
}

/* Patches for values hard-coded in base.css (can't be reached via tokens) */
.nav { background: rgba(24,24,24,0.92); }
body { background-image: radial-gradient(ellipse at 20% 50%, rgba(239,145,10,0.05) 0%, transparent 50%); }
/* The gold accent is a light fill — it needs dark text, not white (brand: #181818 on gold) */
.quiz-check-btn, .dnd-chip, .touch-ghost, .layer-tab.active,
.flow-step-num, .step-num, .btn-primary, .btn-primary:hover { color: #181818; }
/* .quiz-option is a <button> with no explicit color — without this it inherits the
   UA black text and goes near-invisible on its dark/selected/correct/incorrect fills. */
.quiz-option { color: var(--color-text); }

/* Brand logo in the nav */
.nav-brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.nav-logo  { height: 26px; width: auto; flex-shrink: 0; }