/* ============================================================
   KnowFlex design tokens — single source of truth.
   Loaded AFTER the legacy stylesheets so these values win; the
   legacy variable aliases at the bottom re-skin old pages until
   every template is rebuilt on the new component classes.
   Theme: permanent dark, toned-down lime-green accent.
   ============================================================ */
:root {
  /* -- color: surfaces -------------------------------------- */
  --bg:            #0a0a0a;
  --bg-elev:       #101010;
  --surface:       #161616;
  --surface-2:     #1e1e1e;
  --surface-3:     #262626;
  --border:        #2a2a2a;
  --border-strong: #3d3d3d;

  /* -- color: accent (toned down from the old #d4ff00 neon) -- */
  --accent:        #a3e635;
  --accent-hover:  #bef264;
  --accent-active: #84cc16;
  --accent-deep:   #65a30d;
  --accent-dim:    rgba(163, 230, 53, 0.12);
  --accent-line:   rgba(163, 230, 53, 0.35);
  --on-accent:     #0a0a0a;

  /* -- color: text ------------------------------------------ */
  --text:          #f5f5f5;
  --text-2:        #b0b0b0;
  --text-3:        #7d7d7d;

  /* -- color: semantic --------------------------------------- */
  --success:       #4ade80;
  --success-dim:   rgba(74, 222, 128, 0.12);
  --warning:       #fbbf24;
  --warning-dim:   rgba(251, 191, 36, 0.12);
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, 0.12);
  --info:          #60a5fa;
  --info-dim:      rgba(96, 165, 250, 0.12);

  /* -- typography -------------------------------------------- */
  --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* -- spacing (4px base) ------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* -- shape / elevation -------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 44px rgba(0, 0, 0, 0.55);
  --glow:     0 0 24px rgba(163, 230, 53, 0.18);

  /* -- motion -------------------------------------------------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --speed:    160ms;
  --speed-slow: 320ms;

  /* -- layout --------------------------------------------------- */
  --container:     1200px;
  --nav-height:    64px;

  /* ============================================================
     Legacy aliases — every variable the three old stylesheets and
     the inline template styles referenced. Keeping these pointed
     at the new tokens re-skins un-rebuilt pages automatically.
     Remove once the last legacy template dies.
     ============================================================ */
  --neon-green:  var(--accent);
  --dark-bg:     var(--bg);
  --card-bg:     var(--surface);
  --text-white:  var(--text);
  --text-gray:   var(--text-2);
  --shadow-glow: var(--glow);

  --color-primary-50:  rgba(163, 230, 53, 0.08);
  --color-primary-100: rgba(163, 230, 53, 0.15);
  --color-primary-200: rgba(163, 230, 53, 0.25);
  --color-primary-300: #bef264;
  --color-primary-400: var(--accent-hover);
  --color-primary-500: var(--accent);
  --color-primary-600: var(--accent-active);
  --color-primary-700: var(--accent-deep);
  --color-primary-800: #4d7c0f;
  --color-primary-900: #3f6212;

  /* Dark-theme remap of the legacy design-system.css palettes.
     The old values were LIGHT-theme (white cards, slate text, powder-blue
     chips); the legacy stylesheets read them through var(), so redefining
     them here flips every un-rebuilt page to a consistent dark look.
     The neutral scale is intentionally inverted: "light background" steps
     become dark surfaces, "dark text" steps become light text. */
  --color-neutral-0:   var(--surface);
  --color-neutral-50:  var(--bg-elev);
  --color-neutral-100: var(--surface-2);
  --color-neutral-200: var(--border);
  --color-neutral-300: var(--border-strong);
  --color-neutral-400: #6f6f6f;
  --color-neutral-500: #8a8a8a;
  --color-neutral-600: var(--text-2);
  --color-neutral-700: #cfcfcf;
  --color-neutral-800: #e5e5e5;
  --color-neutral-900: var(--text);

  --color-secondary-50:  rgba(96, 165, 250, 0.08);
  --color-secondary-100: rgba(96, 165, 250, 0.15);
  --color-secondary-200: rgba(96, 165, 250, 0.25);
  --color-secondary-300: #93c5fd;
  --color-secondary-400: #60a5fa;
  --color-secondary-500: #60a5fa;
  --color-secondary-600: #3b82f6;
  --color-secondary-700: #93c5fd;
  --color-secondary-800: #bfdbfe;
  --color-secondary-900: #dbeafe;

  --color-info-50:  rgba(96, 165, 250, 0.08);
  --color-info-100: rgba(96, 165, 250, 0.15);
  --color-info-500: var(--info);
  --color-info-600: #3b82f6;
  --color-info-700: #93c5fd;

  --color-success-50:  var(--success-dim);
  --color-success-100: rgba(74, 222, 128, 0.2);
  --color-success-500: var(--success);
  --color-success-600: #22c55e;
  --color-success-700: #86efac;

  --color-warning-50:  var(--warning-dim);
  --color-warning-100: rgba(251, 191, 36, 0.2);
  --color-warning-500: var(--warning);
  --color-warning-600: #f59e0b;
  --color-warning-700: #fcd34d;

  --color-error-50:  var(--danger-dim);
  --color-error-100: rgba(248, 113, 113, 0.2);
  --color-error-500: var(--danger);
  --color-error-600: #ef4444;
  --color-error-700: #fca5a5;

  --focus-ring-color: var(--accent);
  --shadow-glow-primary: var(--glow);
  --shadow-glow-secondary: 0 0 24px rgba(96, 165, 250, 0.15);

  color-scheme: dark;
}