/* ============================================================
   theme.css — Intuitive Signals · Deayan Academy
   ============================================================
   CONTAINS ONLY:
     1. Google Fonts import
     2. CSS custom properties (color system)
     3. Scrollbar styles
   
   All other styling lives inside individual HTML files.
   Changing anything here propagates across every module.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {

  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-void:          #06060f;   /* deepest background          */
  --bg-surface:       #0c0e1a;   /* panels, cards               */
  --bg-elevated:      #111427;   /* hover states, tooltips      */
  --bg-glass:         rgba(12, 14, 26, 0.60);
  --bg-glass-hover:   rgba(12, 14, 26, 0.85);

  /* ── Borders ─────────────────────────────────────────────── */
  --border-subtle:    rgba(255, 255, 255, 0.05);
  --border-default:   rgba(255, 255, 255, 0.08);
  --border-active:    rgba(0, 214, 188, 0.35);
  --border-focus:     rgba(0, 214, 188, 0.60);

  /* ── Primary accent — teal ───────────────────────────────── */
  --teal:             #00d6bc;
  --teal-bright:      #00f0d0;
  --teal-dim:         rgba(0, 214, 188, 0.12);
  --teal-glow:        rgba(0, 214, 188, 0.25);
  --teal-glow-strong: rgba(0, 214, 188, 0.50);

  /* ── Secondary accent — violet ───────────────────────────── */
  --violet:           #7c6dfa;
  --violet-dim:       rgba(124, 109, 250, 0.12);
  --violet-glow:      rgba(124, 109, 250, 0.30);

  /* ── Tertiary accent — amber (warnings / highlights) ─────── */
  --amber:            #f5a623;
  --amber-dim:        rgba(245, 166, 35, 0.12);

  /* ── Danger / negative area ─────────────────────────────── */
  --danger:           #ff5c6a;
  --danger-dim:       rgba(255, 92, 106, 0.12);

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:     #e4e8f0;
  --text-secondary:   #8a97b0;
  --text-muted:       #3d4760;
  --text-accent:      #00d6bc;
  --text-inverse:     #06060f;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:  'Space Grotesk', system-ui, sans-serif;
  --font-mono:  'Space Mono', 'Fira Code', monospace;

  /* ── Misc tokens ─────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --blur-glass:  12px;

  /* ── Transition defaults ─────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}


/* ── Scrollbar (WebKit) ──────────────────────────────────────── */
::-webkit-scrollbar {
  width:  5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background:    var(--bg-void);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb {
  background:    var(--text-muted);
  border-radius: 99px;
  transition:    background var(--duration-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}
::-webkit-scrollbar-corner {
  background: var(--bg-void);
}

/* ── Scrollbar (Firefox) ─────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--bg-void);
}