/* Concept Labs AI Solver — lime redesign (Nov 2026). STYLE ONLY.
   The solver app reads its colours and fonts from these variables, so nothing in its code or its server calls changes.
   Dark: pure black + lime. Light: the existing peach (unchanged). Remove the <link> to this file in ai.html to undo. */

:root,
html[data-theme=dark] {
  --bg: #000000;
  --bg-2: #0b0d07;
  --text: #f3f6ee;
  --muted: #a3ab98;
  --accent: #c8ff2e;
  --accent-2: #a8ee1c;
  --glass-bg: rgba(10, 12, 7, 0.78);
  --glass-border: rgba(200, 255, 46, 0.14);
  --glass-hover: rgba(22, 28, 10, 0.9);
  --chip-bg: rgba(243, 246, 238, 0.06);
  --chip-border: rgba(200, 255, 46, 0.22);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
:root,
html[data-theme=dark],
html[data-theme=light] {
  --font-heading: 'Unbounded', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Outfit', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* soft lime glow behind the page (dark only) */
html[data-theme=dark] body {
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(200, 255, 46, 0.1), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(200, 255, 46, 0.05), transparent 60%),
    #000000;
  background-attachment: fixed;
}

/* headings: the wide display font needs slightly tighter spacing */
.cl-heading, h1, h2, h3 { letter-spacing: -0.03em; }

/* primary buttons + selected chips */
html[data-theme=dark] .cl-btn.is-primary { background: #c8ff2e; color: #000; box-shadow: 0 10px 30px -12px rgba(200, 255, 46, 0.75); }
html[data-theme=dark] .cl-btn.is-primary:hover { box-shadow: 0 14px 36px -10px rgba(200, 255, 46, 0.9); }
html[data-theme=dark] .cl-chip[aria-pressed=true],
html[data-theme=dark] .cl-chip.is-on { color: #000; }

/* gradient text */
html[data-theme=dark] .cl-irid {
  background: linear-gradient(135deg, #ffffff 0%, #e8ffb0 40%, #c8ff2e 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* inputs: lime focus ring */
html[data-theme=dark] .cl-field:focus, html[data-theme=dark] .cl-field:focus-within,
html[data-theme=dark] textarea:focus, html[data-theme=dark] input:focus { border-color: #c8ff2e; box-shadow: 0 0 0 3px rgba(200, 255, 46, 0.16); outline: none; }

::selection { background: #c8ff2e; color: #000; }
html[data-theme=light] ::selection { background: #b3243f; color: #fff; }