/* ── AshenStudio Dashboard - clean corporate theme ───────────────────────
   Staff-surface variant of the workspace AshenStudio design system
   (docs/AshenStudio_Design.md): near-white ground, cool-gray text ramp,
   one crimson accent for primary actions, violet for interactive chrome.
   Inspired by the modern Korean corporate studio language (nc.com):
   white cards on a soft gray ground, black chrome, crisp hairlines,
   weight-driven sans hierarchy. Tokens are the single source for every
   dashboard surface. theme.css also carries the canonical shared
   components (badge/button/switch/kbd/nav) that used to be duplicated in
   every editor stylesheet - those files only keep editor-specific rules
   now. Load theme.css before an editor css so page-specific rules can
   layer on top. */
:root {
  /* ground + surfaces (clean-corporate retune 2026-09-10: the violet-night
     ground flips to the light NC-style ground; text contrast on the light
     surfaces is re-audited in scripts/contrast-audit.cjs) */
  --ashen-canvas:      #F2F2F3;   /* page ground - soft cool gray */
  --ashen-canvas-deep: #E8E8EB;   /* recessed wells */
  --ashen-panel:       #FFFFFF;   /* raised cards - white on gray */
  --ashen-panel-strong:#E8E8EB;   /* pressed / active */
  --ashen-panel-soft:  #EFEFF1;   /* inputs / hover wells */
  /* chrome */
  --ashen-chrome:      #0F1011;   /* nav - near-black bar */
  --ashen-chrome-strong:#000000;
  --ashen-hairline:       #DCDCE0; /* borders */
  --ashen-hairline-strong:#62626A; /* focus / strong lines */
  /* text (deepened for comfortable headroom, not bare 4.5:1) */
  --ashen-ink:       #0F1011;     /* primary text */
  --ashen-ink-soft:  #3D3D43;     /* ≥9:1 on panel */
  --ashen-ink-muted: #62626A;     /* secondary / disabled (≥5.3:1 on panel) */
  --ashen-paper:     #FFFFFF;     /* text on dark chrome */
  /* accents */
  --ashen-accent:       #DB2D4A;  /* crimson accent fill - white text ≥4.6:1 */
  --ashen-accent-strong:#C41F3B;  /* hover / active fill */
  --ashen-accent-bright:#F1415E;  /* bright accent / glows / active dots */
  --ashen-accent-text:  #C41F3B;  /* accent as TEXT on light surfaces (≥5.2:1) */
  --ashen-accent-dim:   rgba(241,65,94,0.12);
  --ashen-accent-deep:  #B72544;
  /* violet accent - interactive chrome; text on light surfaces uses
     --ashen-violet-text (700-grade) */
  --ashen-violet:      #7234E0;
  --ashen-violet-text: #5E21C4;   /* ≥7:1 on white */
  --ashen-violet-dim:  rgba(114,52,224,0.12);
  --ashen-emerald:      #047857;  /* ok / complete / confirm (fill, white text ≥5:1) */
  --ashen-emerald-hover:#065F46;
  --ashen-emerald-press:#064E3B;
  --ashen-emerald-text: #047857;  /* emerald as TEXT on light surfaces (≥4.7:1) */
  /* status (deepened for light-surface contrast) */
  --ashen-red:   #DB2D4A;
  --ashen-amber: #92400E;
  --ashen-sky:   #167FD0;
  /* type */
  --ashen-body:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --ashen-radius: 10px;
}

html { background: var(--ashen-canvas); color-scheme: light; }
body {
  background: var(--ashen-canvas);
  color: var(--ashen-ink);
  font-family: var(--ashen-body);
}

/* ── shared components - canonical ─────────────────────────────────────
   These used to be copy-pasted into every editor stylesheet; theme.css
   is their single home. Editor pages may layer page-specific variants
   (e.g. mob badges) in their own css after this file. */

/* nav links - used inside the near-black chrome (desktop/mobile tools menus) */
.nav-link { padding: .5rem .75rem; border-radius: .5rem; color: var(--ashen-paper); white-space: nowrap; }
.nav-link:hover, .nav-link.active, .nav-link.nav-active { background: rgba(255,255,255,0.10); color: var(--ashen-paper); }

/* pills / status badges */
.badge {
  display: inline-flex; align-items: center; flex: none;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  background: var(--ashen-accent-dim); border: 1px solid rgba(241,65,94,.35);
  color: var(--ashen-accent-text);
}
.badge.published { background: rgba(16,128,58,.10); color: var(--ashen-emerald-text); }
.badge.draft     { background: rgba(146,64,14,.10); color: var(--ashen-amber); }
.badge-error     { background: rgba(219,45,74,0.10); border-color: rgba(219,45,74,0.35); color: var(--ashen-red); }
.badge-success   { background: rgba(16,128,58,.10); color: var(--ashen-emerald-text); border-color: rgba(16,128,58,.35); }
.badge-warning   { background: rgba(146,64,14,.10); color: var(--ashen-amber); border-color: rgba(146,64,14,.35); }
.badge.violet    { background: var(--ashen-violet-dim); border-color: rgba(114,52,224,.35); color: var(--ashen-violet-text); } /* magic / enchant / mana */

/* toggle switches */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider {
  width: 34px; height: 18px; border-radius: 9px;
  background: var(--ashen-hairline-strong); border: 1px solid var(--ashen-hairline-strong);
  position: relative; flex: none;
  transition: background 0.15s, border-color 0.15s;
}
.switch .slider::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ashen-paper);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .slider { background: var(--ashen-violet); border-color: var(--ashen-violet); }
.switch input:checked + .slider::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .slider { outline: 2px solid var(--ashen-violet-text); outline-offset: 2px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: var(--ashen-panel-strong); border: 1px solid var(--ashen-hairline);
  color: var(--ashen-ink); font-weight: 600; font-size: 13px;
  transition: filter .12s, border-color .12s, background .12s, transform .1s;
}
.btn:hover { filter: brightness(0.97); border-color: var(--ashen-hairline-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.btn-primary { background: var(--ashen-accent); border-color: var(--ashen-accent); color: #fff; }
.btn-primary:hover { background: var(--ashen-accent-strong); border-color: var(--ashen-accent-strong); }
.btn-primary:active { background: var(--ashen-accent-deep); }
.btn-secondary { background: var(--ashen-chrome); border-color: var(--ashen-chrome); color: #fff; }
.btn-secondary:hover { background: var(--ashen-chrome-strong); border-color: var(--ashen-chrome-strong); }
/* editor "primary action" - crimson gradient (the corporate call-to-action) */
.btn-accent { background: linear-gradient(180deg, var(--ashen-accent), var(--ashen-accent-strong)); border-color: var(--ashen-accent-strong); color: #fff; }
.btn-accent:hover { filter: brightness(1.05); border-color: var(--ashen-accent-text); }
/* destructive */
.btn.danger { border-color: rgba(219,45,74,.35); color: var(--ashen-red); }
.btn.danger:hover { background: rgba(219,45,74,.08); border-color: var(--ashen-red); }
.btn-small { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.icon-btn {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--ashen-hairline);
  background: var(--ashen-panel-soft); color: var(--ashen-ink);
  cursor: pointer; font-size: 12.5px; line-height: 1;
  transition: filter 0.12s, border-color 0.12s;
}
.icon-btn:hover:not(:disabled) { filter: brightness(0.97); border-color: var(--ashen-hairline-strong); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn.danger:hover:not(:disabled) { border-color: var(--ashen-red); color: var(--ashen-red); }

/* ── editor scaffolding - canonical ────────────────────────────────────
   The page/workspace/folder/toast shell shared by the Skills, Mobs and
   Waystones editors (and the #toasts toast system the Cinematics editor
   renders into). Per-editor details (list ids, form grids, tab bars,
   responsive tweaks) stay in each editor's stylesheet. */
* { box-sizing: border-box; }

/* page frame (trio editors) */
.page {
  display: flex; flex-direction: column; padding: 28px;
  max-width: 1500px; margin: auto;
  height: calc(100vh - 64px); min-height: 520px;
}
.page-head {
  flex: none; display: flex; justify-content: space-between;
  gap: 20px; align-items: flex-start; margin-bottom: 20px;
}
.page-head-actions { display: flex; gap: 8px; flex: none; }
.eyebrow { color: var(--ashen-accent-text); font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.page-head h1 { margin: 4px 0; font-size: 28px; }
.page-head p { margin: 0; color: var(--ashen-ink-muted); }

/* workspace = library sidebar + editor pane */
.workspace {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 320px 1fr; gap: 16px;
}
.library, .editor {
  background: var(--ashen-panel); border: 1px solid var(--ashen-hairline);
  border-radius: var(--ashen-radius); padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.library-tools { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 8px; }
#search {
  width: 100%; background: var(--ashen-panel-soft); color: var(--ashen-ink);
  border: 1px solid var(--ashen-hairline); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; outline: none;
}
#search:focus { border-color: var(--ashen-violet); }

/* collapsible folder groups in the library */
.folder-group { margin-bottom: 4px; }
.folder-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; border-radius: 7px;
  color: var(--ashen-ink-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  user-select: none; transition: background .12s;
}
.folder-header:hover { background: var(--ashen-panel-soft); }
.folder-header .folder-chevron { font-size: 10px; transition: transform .15s; }
.folder-group.collapsed .folder-chevron { transform: rotate(-90deg); }
.folder-group.collapsed .folder-children { display: none; }
.folder-children { margin-left: 4px; }
.folder-count { color: var(--ashen-ink-muted); font-weight: 400; font-size: 11px; margin-left: auto; }

/* toasts - bottom-right editor toasts; shell pages use App.showToast's
   Tailwind pills in #toast-container and are unaffected */
#toasts {
  position: fixed; bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 100; pointer-events: none;
}
.toast {
  background: var(--ashen-panel); border: 1px solid var(--ashen-hairline-strong);
  border-left: 3px solid var(--ashen-accent-text); border-radius: 10px;
  padding: 11px 16px; font-size: 13px; box-shadow: 0 10px 30px rgba(15,16,17,.14);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
  max-width: 380px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--ashen-emerald-text); }
.toast-error { border-left-color: var(--ashen-red); }
.toast-warn { border-left-color: var(--ashen-amber); }

/* ── shell components (pages not carrying an editor css) ── */
.card-subtle {
  background: var(--ashen-panel);
  border: 1px solid var(--ashen-hairline);
  box-shadow: 0 1px 0 rgba(15,16,17,0.03), 0 6px 18px rgba(15,16,17,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-subtle:hover { box-shadow: 0 2px 0 rgba(15,16,17,0.03), 0 10px 26px rgba(15,16,17,0.08); }

.input {
  background: var(--ashen-panel-soft); border: 1px solid var(--ashen-hairline);
  color: var(--ashen-ink); border-radius: 8px; padding: 8px 10px; font-size: 13px;
  font-family: var(--ashen-body);
}
.input:focus { outline: none; border-color: var(--ashen-violet); box-shadow: 0 0 0 3px var(--ashen-violet-dim); }

select { color-scheme: light; }
select option, select optgroup { color: var(--ashen-ink); background: var(--ashen-panel-soft); }
select option:checked { background: var(--ashen-panel-strong); }

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .4s ease-out; }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

}