/* ==========================================================================
   CSByDesign — Design Tokens v1 (2026-05-19)

   Mirrors LearningByDesign + KnowledgeByDesign + HRByDesign tokens.css so the
   polish layer is portable. Identity differs by --brand-primary only.

   Brand identity (CS product):
     PRIMARY  = Electric Amber (#FFD60A dark / #D4A800 light)
     ACCENT   = Cyan            (#00F0FF dark / #0891B2 light)

   Tron-canon: yellow/amber is a "signal/alert" color in the original Tron
   universe — fits the customer-service mission of "incoming signals get
   resolved." Cyan stays the ecosystem anchor across every ByDesign product.

   Loaded AFTER /styles.css and BEFORE polish.css.
   ========================================================================== */

/* ── SHARED TOKENS (theme-agnostic) ────────────────────────────────────── */
:root {
  --font-head: 'Orbitron', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --speed-fast:  150ms;
  --speed:       250ms;
  --speed-slow:  400ms;

  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill:999px;

  --sidebar-w:           240px;
  --sidebar-collapsed-w: 64px;
  --topbar-h:            56px;
}

/* ── LIGHT THEME (cream base, muted amber+cyan, subtle glows) ─────────── */
:root,
body.theme-light,
[data-theme="light"] {
  --bg:            #FBF9F5;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface2:      #F4F0E8;
  --surface3:      #ECE5D5;
  --border:        #E3DDD0;
  --border-strong: #C9C0AE;
  --border-subtle: #EFEAE0;

  --text:           #1C1C1C;
  --text-primary:   #1C1C1C;
  --text-secondary: #4A4A4A;
  --text-tertiary:  #6B6B6B;
  --muted:          #8A8580;
  --muted2:         #B5B0A8;
  --text-bright:    #0A0A0A;

  /* Brand — Electric Amber primary, Cyan accent (muted for light) */
  --brand-primary: #D4A800;
  --brand-deep:    #A88200;
  --brand-soft:    #FFC828;
  --brand-tint:    rgba(212, 168, 0, 0.10);
  --brand-glow:    rgba(212, 168, 0, 0.25);

  --cyan:       #0891B2;
  --cyan-deep:  #155E75;
  --cyan-soft:  #67E8F9;
  --cyan-tint:  rgba(8, 145, 178, 0.08);
  --cyan-glow:  rgba(8, 145, 178, 0.20);

  /* Legacy mint/teal aliases — CS's old styles.css used --brand-primary
     hard-coded to #14B8A6 (Learning teal). Redirect so any leftover
     reference picks up the new identity. */
  --brand-mint:      var(--brand-primary);
  --brand-mint-glow: var(--brand-glow);

  /* Legacy hyphenated surface aliases — old CS styles.css uses these */
  --surface-1:        var(--surface);
  --surface-2:        var(--surface2);
  --surface-3:        var(--surface3);
  --surface-elevated: var(--bg-elevated);
  --bg-secondary:     var(--surface2);
  --bg-secondary-alt: var(--surface2);
  --bg-tertiary:      var(--surface3);
  --border-default:   var(--border);

  --success:      #10B981;
  --success-tint: rgba(16, 185, 129, 0.10);
  --success-glow: rgba(16, 185, 129, 0.25);

  --warning:      #F59E0B;
  --warning-tint: rgba(245, 158, 11, 0.10);
  --warning-glow: rgba(245, 158, 11, 0.25);

  --danger:       #EF4444;
  --danger-tint:  rgba(239, 68, 68, 0.10);
  --danger-glow:  rgba(239, 68, 68, 0.25);

  --info:         #3B82F6;
  --info-tint:    rgba(59, 130, 246, 0.10);

  --glow-brand: 0 0 8px var(--brand-glow), 0 0 20px rgba(212, 168, 0, 0.08);
  --glow-cyan:  0 0 8px var(--cyan-glow),  0 0 20px rgba(8, 145, 178, 0.06);
  --glow-mint:  var(--glow-brand);
  --glow-warn:  0 0 8px var(--warning-glow);
  --glow-danger:0 0 8px var(--danger-glow);
  --glow-line:  0 0 1px var(--brand-glow);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 20px 40px rgba(0,0,0,0.08);
}

/* ── DARK THEME (Tron — near-black, electric amber + cyan, full glow) ─── */
body.theme-dark,
[data-theme="dark"] {
  --bg:            #0A0C10;
  --bg-elevated:   #111318;
  --surface:       #111318;
  --surface2:      #181B22;
  --surface3:      #1E2130;
  --border:        #2A2E3F;
  --border-strong: #3A3F55;
  --border-subtle: #1F2230;

  --text:           #E8EAF0;
  --text-primary:   #E8EAF0;
  --text-secondary: #B5B8C5;
  --text-tertiary:  #8A8F9F;
  --muted:          #6B7080;
  --muted2:         #4A4F60;
  --text-bright:    #FFFFFF;

  /* Brand — Electric Amber primary, Cyan accent (full neon for dark) */
  --brand-primary: #FFD60A;
  --brand-deep:    #D4A800;
  --brand-soft:    #FFE970;
  --brand-tint:    rgba(255, 214, 10, 0.12);
  --brand-glow:    rgba(255, 214, 10, 0.45);

  --cyan:       #00F0FF;
  --cyan-deep:  #00B5C2;
  --cyan-soft:  #66F7FF;
  --cyan-tint:  rgba(0, 240, 255, 0.10);
  --cyan-glow:  rgba(0, 240, 255, 0.35);

  --brand-mint:      var(--brand-primary);
  --brand-mint-glow: var(--brand-glow);

  --surface-1:        var(--surface);
  --surface-2:        var(--surface2);
  --surface-3:        var(--surface3);
  --surface-elevated: var(--bg-elevated);
  --bg-secondary:     var(--surface2);
  --bg-secondary-alt: var(--surface2);
  --bg-tertiary:      var(--surface3);
  --border-default:   var(--border);

  --success:      #00E676;
  --success-tint: rgba(0, 230, 118, 0.12);
  --success-glow: rgba(0, 230, 118, 0.35);

  --warning:      #FFAB40;
  --warning-tint: rgba(255, 171, 64, 0.12);
  --warning-glow: rgba(255, 171, 64, 0.35);

  --danger:       #FF2A40;
  --danger-tint:  rgba(255, 42, 64, 0.12);
  --danger-glow:  rgba(255, 42, 64, 0.35);

  --info:         #40C4FF;
  --info-tint:    rgba(64, 196, 255, 0.12);

  --glow-brand: 0 0 14px var(--brand-glow), 0 0 36px rgba(255, 214, 10, 0.18);
  --glow-cyan:  0 0 12px var(--cyan-glow),  0 0 32px rgba(0, 240, 255, 0.12);
  --glow-mint:  var(--glow-brand);
  --glow-warn:  0 0 12px var(--warning-glow);
  --glow-danger:0 0 12px var(--danger-glow);
  --glow-line:  0 0 1px rgba(0, 240, 255, 0.6);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --shadow:    0 4px 8px rgba(0,0,0,0.35), 0 10px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.50), 0 24px 50px rgba(0,0,0,0.60);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.012em;
  line-height: 1.2;
  color: var(--text);
}

a {
  color: var(--cyan);
  transition: color var(--speed) var(--ease), text-shadow var(--speed) var(--ease);
}
a:hover { color: var(--cyan-soft); }
[data-theme="dark"] a:hover,
body.theme-dark a:hover { text-shadow: var(--glow-cyan); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* Amber has poor contrast with white text on amber backgrounds — use dark text */
::selection {
  background: var(--brand-primary);
  color: #0A0C10;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}