/* static/css/theme.css — universal Dark/Light + optional accents
   - Accents apply in BOTH themes when data-accent != "none"
   - Default: Light -> none, Dark -> green (set in theme.js)
*/

/* ---------- Base (designer owns Light) ---------- */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --surface:#f7f8fa; --border:#e5e7eb;
  --accent:#22c55e; /* replaced by [data-accent] */
  --ring: color-mix(in srgb, var(--accent) 40%, transparent);
  color-scheme: light dark;
}

html,body{
  margin:0; background:var(--bg); color:var(--fg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{ color: inherit; } /* let designers style links in Light if they want */

button,.btn{
  font:inherit; border:1px solid var(--border); background:var(--surface); color:var(--fg);
  padding:.5rem .75rem; border-radius:.5rem; cursor:pointer;
  display:inline-grid; place-items:center; line-height:1;
}
button:focus-visible,.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

input,select,textarea{
  font:inherit; color:var(--fg); background:var(--surface);
  border:1px solid var(--border); border-radius:.375rem; padding:.5rem .625rem;
}
pre,code{ color:inherit }

/* ---- Accent helpers for components ------------------------------------- */

/* Filled accent button (primary-style) */
.btn.is-accent{
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow:
    0 1px 0 rgba(0,0,0,.15),
    0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn.is-accent:hover{
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
}

/* Outline pill/tag that reads as strongly accented */
.tag.is-accent{
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.tag.is-accent:hover{
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Utility: if someone adds .accent-text / .accent-border already, keep them vivid */
.accent-text{ color: var(--accent) !important; }
.accent-border{ border-color: var(--accent) !important; }

/* color input — let the selected swatch be visible and fill the control */
input[type="color"]{
  width:100%;
  height:2.25rem;
  padding:0;               /* remove inner padding so swatch fills */
  background:transparent;  /* let the native swatch be seen */
  border:1px solid var(--border);
  border-radius:.4rem;
  cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
input[type="color"]::-webkit-color-swatch{
  border:none;
  border-radius:.3rem;
}
input[type="color"]::-moz-color-swatch{
  border:none;
  border-radius:.3rem;
}

/* ---------- Dark palette ---------- */
[data-theme="dark"]{
  --bg:#0b0d10; --fg:#e5e7eb; --muted:#9aa4b2; --surface:#12161c; --border:#1f2937;
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Accent choices ---------- */
[data-accent="green"]  { --accent:#22c55e; }
[data-accent="blue"]   { --accent:#3b82f6; }
[data-accent="red"]    { --accent:#ef4444; }
[data-accent="yellow"] { --accent:#eab308; }
[data-accent="orange"] { --accent:#f59e0b; }
[data-accent="purple"] { --accent:#a855f7; }
[data-accent="pink"]   { --accent:#ec4899; }
[data-accent="none"]   { --accent: currentColor; } /* effectively 'no tint' */

/* ---------- Global accenting (only when chosen) ---------- */
html:not([data-accent="none"]){ accent-color: var(--accent); }

/* Auto-tint links only when an accent is selected */
html:not([data-accent="none"]) a{
  color: color-mix(in srgb, var(--accent) 82%, var(--fg));
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, currentColor);
}
html:not([data-accent="none"]) a:hover{
  color: color-mix(in srgb, var(--accent) 92%, var(--fg));
  text-decoration-thickness: .12em;
}

/* borders/lines everywhere */
html:not([data-accent="none"]) :is(.card, table, th, td, hr, details, summary, .pill,
  button, .btn, input, select, textarea, pre, code, .language-selector, .language-selector select){
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* code block outline pop */
html:not([data-accent="none"]) pre{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* details summary color (marker is UA-styled; tint text at least) */
html:not([data-accent="none"]) details > summary{
  color: color-mix(in srgb, var(--accent) 70%, var(--fg));
}

/* Subtle accented scrollbars (modern engines)
   - Page scrollbar: style on body
   - In-page scroll containers: style on any element with overflow (generic *)
*/
html:not([data-accent="none"]) body{
  /* Firefox & compatible */
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border))
                   color-mix(in srgb, var(--surface) 92%, transparent);
}

/* Chromium/WebKit page scrollbar */
html:not([data-accent="none"]) body::-webkit-scrollbar{
  width: 12px; height: 12px;
}
html:not([data-accent="none"]) body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
  border: 3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 999px;
}
html:not([data-accent="none"]) body::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* Generic rule for in-page scroll areas (e.g., overflow:auto panels) */
html:not([data-accent="none"]) *{
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--border))
                   color-mix(in srgb, var(--surface) 92%, transparent);
}
html:not([data-accent="none"]) *::-webkit-scrollbar{
  width: 12px; height: 12px;
}
html:not([data-accent="none"]) *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
  border: 3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 999px;
}
html:not([data-accent="none"]) *::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent) 70%, var(--border));
}

/* progress */
progress{ width:100%; height:.6rem; border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 80%, transparent); border-radius:999px; }
progress::-webkit-progress-bar{ background:transparent; border-radius:999px; }
progress::-webkit-progress-value{ background:var(--accent); border-radius:999px; }
progress::-moz-progress-bar{ background:var(--accent); }

/* range */
input[type="range"]{ appearance:none; height:.35rem; background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border); border-radius:999px; }
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:1rem; height:1rem; border-radius:999px; background:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent); border:none; margin-top:-.35rem;
}
input[type="range"]::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:999px; background:var(--accent);
  border:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent);
}

/* select focus ring */
select:focus{ outline:2px solid var(--ring); outline-offset:2px; }

/* ---------- Language selector ---------- */
.language-selector{
  position:fixed; bottom:1rem; right:1rem;
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.55rem .75rem;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow:0 4px 16px color-mix(in srgb, var(--fg) 10%, transparent); z-index:1000;
}
.language-selector-label{ display:block; margin-bottom:.25rem; font-weight:600; font-size:.9rem; color:var(--fg); }
.language-selector select{
  width:100%; padding:.35rem .5rem; border-radius:8px; border:1px solid var(--border);
  font-size:.95rem; background:var(--surface); color:var(--fg);
}

/* ---------- Helpers ---------- */
.surface{ background:var(--surface); border:1px solid var(--border); border-radius:.75rem; }
.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; border:1px solid var(--border); }
.card{ border:1px solid var(--border); background:var(--surface); border-radius:.8rem; padding:1rem; }

/* ---------- Theme tools (top-right) ---------- */
.theme-tools{ position:fixed; top:.75rem; right:.75rem; display:flex; gap:.5rem; z-index:2147483647; }
.theme-tools #theme-toggle,
.theme-tools #accent-toggle{
  width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; line-height:0;
  background:var(--surface); border:1px solid var(--border); border-radius:.65rem;
  box-shadow:0 2px 10px color-mix(in srgb, var(--fg) 8%, transparent);
}

/* the little circle shown on the toggle button itself */
.theme-tools #accent-toggle .swatch{
  display:block;
  width:1.25rem;
  height:1.25rem;
  margin:auto;
  border-radius:999px;
  background: var(--accent);
  position:relative;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent),
    0 0 10px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ==== Accented focus & selection ================================================= */

:where(input, select, textarea, button, a.btn, .btn):focus,
:where(input, select, textarea, button, a.btn, .btn):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

:where(input, select, textarea):focus{
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
}

/* accent the caret and selection for text fields */
:root{ caret-color: var(--accent); }
::selection{
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--on-accent, #fff);
}
::-moz-selection{
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--on-accent, #fff);
}

/* optional: focus style for tag/pill components if they are focusable */
.tag:focus, .tag:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ==== Select (dropdown) accenting — active only when an accent is chosen ==== */

html:not([data-accent="none"]) select{
  background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
      color-mix(in srgb, var(--accent) 3%, var(--surface)) 100%
  );
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 2px 10px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* stronger focus ring while the menu is open or focused */
html:not([data-accent="none"]) select:focus,
html:not([data-accent="none"]) select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
}

/* style the popup list rows (browser support is good on modern engines) */
html:not([data-accent="none"]) select option{
  background: var(--surface);
  color: var(--fg);
}

/* the currently highlighted/selected option gets a solid accent fill */
html:not([data-accent="none"]) select option:checked{
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* hover/active rows get a soft accent wash for easier scan */
html:not([data-accent="none"]) select option:hover{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

/* ---------- Accent palette menu (picker) ---------- */
#accent-menu[hidden]{ display:none; }
#accent-menu{
  position:absolute; top:calc(100% + .4rem); right:0;
  background:var(--surface); border:1px solid var(--border); padding:.5rem; border-radius:.8rem;
  display:flex; flex-direction:column; gap:.4rem;
  box-shadow:0 10px 28px color-mix(in srgb, var(--fg) 14%, transparent);
}
#accent-menu .accent-option{
  width:2.2rem; height:2.2rem; display:grid; place-items:center; padding:0; line-height:0;
  border:1px solid var(--border); background:var(--surface); border-radius:.65rem; cursor:pointer; transition:transform .12s ease;
}
#accent-menu .accent-option:hover{ transform: translateY(-1px); }
#accent-menu .accent-option .swatch{
  display:block; width:1.25rem; height:1.25rem; margin:auto; border-radius:999px; background:var(--sw,var(--accent)); position:relative;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent),
    0 0 10px color-mix(in srgb, var(--sw,var(--accent)) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--sw,var(--accent)) 40%, transparent);
}
#accent-menu .accent-option[aria-checked="true"] .swatch{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--surface) 70%, transparent),
    0 0 0 5px color-mix(in srgb, var(--sw,var(--accent)) 90%, transparent),
    0 0 22px color-mix(in srgb, var(--sw,var(--accent)) 55%, transparent);
}
/* none option slash */
#accent-menu .accent-option.none .swatch{ background:transparent; border:2px solid var(--border); }
#accent-menu .accent-option.none .swatch::after{
  content:""; position:absolute; left:16%; right:16%; top:50%; height:2px; background:#ef4444; transform:rotate(-45deg);
}
/* reflect none on the toggle swatch too */
#accent-toggle.is-none .swatch{
  background:transparent !important; border:2px solid var(--border);
}
#accent-toggle.is-none .swatch::after{
  content:""; position:absolute; left:16%; right:16%; top:50%; height:2px; background:#ef4444; transform:rotate(-45deg);
}