/* ===========================================================================
   Codes.Live — base.css
   Design tokens, reset, typography, theming.
   ========================================================================== */

:root {
  /* Brand accent — LeetCode/HackerRank green; resolved per-theme below.
     --violet/--cyan/--sky remain for the functional visualization palette & syntax highlighting. */
  --indigo: #0a8a43;            /* brand accent (green) — token name kept for compatibility */
  --brand:  #16a34a;
  --brand-gold: #ffa116;        /* LeetCode gold — used sparingly */
  --violet: #5b9bf8;            /* was purple — repurposed to a blue to cut purple */
  --cyan:   #22d3ee;
  --sky:    #38bdf8;
  --accent-gradient: linear-gradient(135deg, #16a34a 0%, #0f8a3e 100%);
  --on-accent: #ffffff;

  /* Difficulty system (LeetCode): Easy / Medium / Hard */
  --intro:  rgb(121, 129, 19);
  --easy:   #0a9d6e;
  --medium: #b9791f;
  --hard:   #d63a3a;

  /* Semantic visualization colors (shared fallback; tuned per-theme below for
     contrast). Deliberately low on purple — "active/primary" is blue, "pivot" is
     orange, so distinct states read clearly on both light and dark canvases. */
  --c-default: #64748b;
  --c-primary: #4781dd;   /* the "active" element      (blue)   */
  --c-compare: #fbbf24;   /* being compared            (amber)  */
  --c-swap:    #fb7185;   /* being swapped / moved     (rose)   */
  --c-sorted:  #34d399;   /* finalized / done          (emerald)*/
  --c-pivot:   #fb923c;   /* pivot / special           (orange) */
  --c-visited: #38bdf8;   /* visited / explored        (sky)    */
  --c-frontier:#fbbf24;   /* frontier / in queue       (amber)  */
  --c-path:    #fcd34d;   /* solution path             (gold)   */
  --c-wall:    #334155;   /* wall / blocked            (slate)  */
  --c-found:   #34d399;   /* search hit                (emerald)*/

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radii & shadows */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .28s;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 60px;
}

/* ---- Dark theme (LeetCode-style charcoal) ---- */
:root[data-theme="dark"] {
  --bg:        #1a1a1a;
  --bg-grad-1: #1f2a22;
  --bg-grad-2: #1b211d;
  --surface:   #282828;
  --surface-2: #2f2f31;
  --panel:     #282828;
  --elevated:  #323234;
  --border:    rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --text:      #eff2f6;
  --text-dim:  #b6bcc6;
  --muted:     #868b95;
  --shadow:    0 18px 50px -12px rgba(0,0,0,.7);
  --shadow-sm: 0 4px 16px -6px rgba(0,0,0,.5);
  --indigo:    #2ec866;
  --brand:     #2ec866;
  --accent-gradient: linear-gradient(135deg, #2ec866 0%, #22b85c 100%);
  --on-accent: #06210f;
  --easy:      #2cd1a0;
  --medium:    #ffb800;
  --hard:      #ff5b6a;
  --glow:      0 0 0 1px rgba(46,200,102,.30), 0 8px 30px -8px rgba(46,200,102,.28);
  --grid-line: rgba(255,255,255,.05);
  /* Viz palette — bright on charcoal, no purple */
  --c-default: #64748b;
  --c-primary: #4f9bff;
  --c-compare: #fbbf24;
  --c-swap:    #fb7185;
  --c-sorted:  #34d399;
  --c-pivot:   #fb923c;
  --c-visited: #38bdf8;
  --c-frontier:#fbbf24;
  --c-path:    #fcd34d;
  --c-wall:    #334155;
  --c-found:   #34d399;
  --violet:    #7aa9ff;
  color-scheme: dark;
}

/* ---- Light theme (default — LeetCode/HackerRank: light gray page, white cards) ---- */
:root[data-theme="light"] {
  --bg:        #f1f2f6;
  --bg-grad-1: #e9f7ee;
  --bg-grad-2: #eef3fb;
  --surface:   #ffffff;
  --surface-2: #f5f6f9;
  --panel:     #ffffff;
  --elevated:  #ffffff;
  --border:    #e6e8ec;
  --border-strong: #d3d7de;
  --text:      #1f2329;
  --text-dim:  #515760;
  --muted:     #9298a3;
  --shadow:    0 18px 50px -16px rgba(20,40,30,.18);
  --shadow-sm: 0 3px 12px -6px rgba(20,40,30,.13);
  --indigo:    #0a8a43;
  --brand:     #16a34a;
  --accent-gradient: linear-gradient(135deg, #16a34a 0%, #0f8a3e 100%);
  --on-accent: #ffffff;
  --easy:      #0a9d6e;
  --medium:    #b9791f;
  --hard:      #d63a3a;
  --glow:      0 0 0 1px rgba(16,163,74,.28), 0 10px 30px -10px rgba(16,163,74,.22);
  --grid-line: rgba(20,40,30,.06);
  /* Viz palette — deeper & saturated so fills read on a white canvas, no purple */
  --c-default: #8a94a6;
  --c-primary: #4781dd;
  --c-compare: #fbbf24;
  --c-swap:    #e11d48;
  --c-sorted:  #059669;
  --c-pivot:   #ea580c;
  --c-visited: #0284c7;
  --c-frontier:#d97706;
  --c-path:    #ca8a04;
  --c-wall:    #475569;
  --c-found:   #059669;
  --violet:    #2563eb;
  color-scheme: light;
}

/* ===========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
code, kbd, pre { font-family: var(--font-mono); }

/* ===========================================================================
   Scrollbars
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================================
   Utilities
   ========================================================================== */
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.dim { color: var(--text-dim); }
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.no-select { user-select: none; -webkit-user-select: none; }

@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

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