/* =========================================================
   Theme layer (load AFTER skeleton.css)
   - Uses your existing --ont-* variables
   - Adds a few extra tokens for Skeleton parts
   - Supports: <html data-theme="dark"> (or "light")
   ========================================================= */

/* ---------- 1) Extend your LIGHT tokens (keeps your current values) ---------- */
:root {
  /* Your existing tokens (keep as-is if already defined) */
  --ont-bg: #f8fafc;
  --ont-emph-bg: #f3f3ff;
  --ont-panel-bg: #ffffff;
  --ont-border: #d0d7de;

  --ont-text: #1f2937;
  --ont-muted: #4b5563;

  --ont-accent: #2563eb;
  --ont-accent-soft: #e0e7ff;

  --ont-pill-bg: #eef2ff;
  --ont-pill-text: #1e3a8a;

  --ont-focus: #2563eb;

  --ont-radius: 6px;
  --ont-gap: 1rem;

  --ont-font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ont-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Extra tokens used to restyle Skeleton */
  --ont-link: var(--ont-accent);
  --ont-link-hover: #1d4ed8;

  --ont-btn-text: #374151;
  --ont-btn-border: #b6c0cc;
  --ont-btn-hover-text: #111827;
  --ont-btn-hover-border: #7b8794;

  --ont-input-bg: #ffffff;
  --ont-input-text: var(--ont-text);
  --ont-input-placeholder: #9ca3af;

  --ont-code-bg: #f1f5f9;
  --ont-code-border: #e2e8f0;

  --ont-table-border: #e2e8f0;

  /* Helps the browser render built-in controls appropriately */
  color-scheme: light;
}

/* ---------- 2) DARK tokens (activate with <html data-theme="dark">) ---------- */
:root[data-theme="dark"] {
  --ont-bg: #0b1220;          /* deep slate */
  --ont-emph-bg: #090929;
  --ont-panel-bg: #0f172a;    /* panel surface */
  --ont-border: #334155;      /* slate border */

  --ont-text: #e5e7eb;        /* near-white */
  --ont-muted: #94a3b8;       /* muted slate */

  --ont-accent: #60a5fa;      /* brighter blue for dark bg */
  --ont-accent-soft: #1e293b;

  --ont-pill-bg: #1e293b;
  --ont-pill-text: #bfdbfe;

  --ont-focus: #93c5fd;

  --ont-link: var(--ont-accent);
  --ont-link-hover: #93c5fd;

  --ont-btn-text: var(--ont-text);
  --ont-btn-border: #475569;
  --ont-btn-hover-text: #ffffff;
  --ont-btn-hover-border: #94a3b8;

  --ont-input-bg: #0b1324;
  --ont-input-text: var(--ont-text);
  --ont-input-placeholder: #64748b;

  --ont-code-bg: #0b1324;
  --ont-code-border: #334155;

  --ont-table-border: #334155;

  color-scheme: dark;
}

/* Optional: follow OS preference unless you explicitly set data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* If you do nothing, this makes dark the default on dark-OS */
    /* You can remove this block if you want manual-only toggling. */
    --ont-bg: #0b1220;
    --ont-panel-bg: #0f172a;
    --ont-border: #334155;
    --ont-text: #e5e7eb;
    --ont-muted: #94a3b8;
    --ont-accent: #60a5fa;
    --ont-accent-soft: #1e293b;
    --ont-pill-bg: #1e293b;
    --ont-pill-text: #bfdbfe;
    --ont-focus: #93c5fd;

    --ont-link: var(--ont-accent);
    --ont-link-hover: #93c5fd;

    --ont-btn-text: var(--ont-text);
    --ont-btn-border: #475569;
    --ont-btn-hover-text: #ffffff;
    --ont-btn-hover-border: #94a3b8;

    --ont-input-bg: #0b1324;
    --ont-input-text: var(--ont-text);
    --ont-input-placeholder: #64748b;

    --ont-code-bg: #0b1324;
    --ont-code-border: #334155;

    --ont-table-border: #334155;

    color-scheme: dark;
  }
}

/* ---------- 3) Skeleton overrides (map Skeleton styles to your tokens) ---------- */

/* Base */
html, body {
  margin: 0 0;
  background: var(--ont-bg);
  color: var(--ont-text);
  font-family: var(--ont-font-body);
}

/* Typography */
p { color: var(--ont-text); }
small, .muted { color: var(--ont-muted); }

/* Links */
a { color: var(--ont-link); }
a:hover { color: var(--ont-link-hover); }

/* Buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  color: var(--ont-btn-text);
  border-color: var(--ont-btn-border);
  background-color: transparent;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: var(--ont-btn-hover-text);
  border-color: var(--ont-btn-hover-border);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ont-focus) 35%, transparent);
}

/* Skeleton "primary" buttons */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fff;
  background-color: var(--ont-accent);
  border-color: var(--ont-accent);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #fff;
  background-color: var(--ont-link-hover);
  border-color: var(--ont-link-hover);
}

/* Forms */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  background-color: var(--ont-input-bg);
  color: var(--ont-input-text);
  border-color: var(--ont-border);
}

input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--ont-input-placeholder);
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--ont-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ont-focus) 35%, transparent);
}

/* Code blocks / inline code */
code {
  background: var(--ont-code-bg);
  border-color: var(--ont-code-border);
  color: var(--ont-text);
  font-family: var(--ont-font-mono);
}

pre > code {
  background: var(--ont-code-bg);
  border-color: var(--ont-code-border);
}

/* Tables */
th, td {
  border-bottom-color: var(--ont-table-border);
}

/* Rule */
hr {
  border-top-color: var(--ont-border);
}

/* Theme toggle switch (scoped) */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--ont-border);
  background: var(--ont-panel-bg);
  padding: 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--ont-border) 70%, var(--ont-text));
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ont-focus) 35%, transparent);
}

.theme-toggle__track {
  position: relative;
  width: 62px;
  height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ont-accent-soft) 65%, var(--ont-panel-bg));
  border: 1px solid var(--ont-border);
  box-sizing: border-box;

  /* Slots */
  --toggle-inset: 3px;     /* distance from track edge */
  --toggle-thumb: 24px;    /* thumb size AND icon slot size */

  /* Optional fine-tuning (glyph nudges inside the slots) */
  --sun-nudge: 0px;        /* try 3px */
  --moon-nudge: 0px;
}

.theme-toggle__icon {
  position: absolute;
  top: 50%;
  width: var(--toggle-thumb);
  height: var(--toggle-thumb);
  display: grid;
  place-items: center;

  /* Above thumb */
  z-index: 2;

  user-select: none;
  pointer-events: none;

  opacity: 0.55;
  font-size: 14px;
  line-height: 1;

  /* subtle legibility */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.20));

  /* default vertical centering */
  transform: translateY(-50%);
}

.theme-toggle__thumb {
  position: absolute;
  top: 50%;
  left: var(--toggle-inset);
  width: var(--toggle-thumb);
  height: var(--toggle-thumb);
  border-radius: 999px;
  background: var(--ont-panel-bg);
  border: 1px solid var(--ont-border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);

  z-index: 1;

  transform: translateY(-50%);
  transition: left 160ms ease;
}

/* Left slot (light thumb position) */
.theme-toggle__icon--sun {
  left: var(--toggle-inset);
  transform: translate(var(--sun-nudge), -50%); /* nudge glyph right/left */
}

/* Right slot (dark thumb position) */
.theme-toggle__icon--moon {
  left: calc(100% - var(--toggle-inset) - var(--toggle-thumb));
  transform: translate(var(--moon-nudge), -50%); /* nudge glyph right/left */
}


/* When dark, move the thumb right */
:root[data-theme="dark"] .theme-toggle__thumb {
  left: calc(100% - var(--toggle-inset) - var(--toggle-thumb));
}

/* Emphasize the "current" theme icon */
:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; }
:root[data-theme="light"] .theme-toggle__icon--moon { opacity: 0.45; }

:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0.45; }

:root {
  --sun-nudge: 3px;
  --moon-nudge: 0px;
}

/* Screen-reader only helper */
.theme-toggle__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: min(18rem, calc(100vw - 2rem));
  max-width: 24rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ont-border, rgba(0, 0, 0, 0.12));
  border-left-width: 6px;
  border-radius: 8px;
  background: var(--ont-panel-bg, #ffffff);
  color: var(--ont-text, #111827);
  box-shadow: var(--ont-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.14));
  font: 0.95rem/1.35 var(--ont-font-body, system-ui, sans-serif);
  pointer-events: auto;
}

.toast--info { border-left-color: var(--ont-info, #2563eb); }
.toast--success { border-left-color: var(--ont-success, #15803d); }
.toast--warning { border-left-color: var(--ont-warning, #d97706); }
.toast--error { border-left-color: var(--ont-danger, #dc2626); }

.toast:focus-visible {
  outline: 2px solid var(--ont-focus, #2563eb);
  outline-offset: 2px;
}