/* ============================================================================
   Content Factory — Design System (ds.css)
   ----------------------------------------------------------------------------
   Single source of truth for the admin UI's look. TOKENS first, then reusable
   COMPONENT classes built only from those tokens. Any project's admin (any pack)
   links this file and gets the same consistent output. Change a token here →
   everything updates. Never hard-code a color/space/radius in a page; use a
   token or a component class.
   Theme: dark-first, committed single theme (a dev/admin console). Tokens are
   structured so a light theme could be a drop-in override later.
   ========================================================================== */

:root{
  /* ── color primitives ─────────────────────────────────────────────────────
     Palette: WHITE text, GREY surfaces (neutral greys with a faint green bias
     so they read as chosen, not default), SHINY GREEN accent (emerald). */
  --c-ink-900:#0a0d0c; --c-ink-850:#0e1211; --c-ink-800:#131917; --c-ink-700:#1a221f;
  --c-ink-600:#212a27; --c-ink-500:#2a332f; --c-ink-400:#36423d;
  --c-slate-300:#69756f; --c-slate-200:#96a29b; --c-slate-100:#c2ccc6; --c-white:#eef3f0;
  --c-emerald:#2fe3a0; --c-emerald-deep:#12b886; --c-emerald-soft:#0d2a20; --c-emerald-tint:#c9f6e5;
  --c-amber:#e0b021; --c-amber-soft:#2a2410;
  --c-red:#f0603f;   --c-red-soft:#2a1512;

  /* ── semantic aliases (use THESE in components) ───────────────────────── */
  --bg:var(--c-ink-900); --bg-alt:var(--c-ink-850);
  --surface:var(--c-ink-800); --surface-2:var(--c-ink-700); --surface-3:var(--c-ink-600);
  --border:var(--c-ink-500); --border-strong:var(--c-ink-400);
  --text:var(--c-white); --text-muted:var(--c-slate-200); --text-faint:var(--c-slate-300);
  --accent:var(--c-emerald); --accent-deep:var(--c-emerald-deep); --accent-soft:var(--c-emerald-soft);
  --accent-fg:#04231a; --accent-tint:var(--c-emerald-tint);
  --success:var(--c-emerald); --success-soft:var(--c-emerald-soft);
  --warning:var(--c-amber); --warning-soft:var(--c-amber-soft);
  --danger:var(--c-red); --danger-soft:var(--c-red-soft);

  /* shiny treatment: accent gradient + glow, and a subtle top-gloss for cards */
  --accent-grad:linear-gradient(135deg,var(--c-emerald),var(--c-emerald-deep));
  --accent-glow:0 0 0 1px rgba(47,227,160,.25), 0 6px 20px -6px rgba(47,227,160,.45);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%);

  /* ── space scale (4px base) ───────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ── radius ───────────────────────────────────────────────────────────── */
  --r-sm:7px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* ── typography ───────────────────────────────────────────────────────── */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:15.5px; --fs-xl:18px; --fs-2xl:30px;
  --fw-normal:400; --fw-medium:550; --fw-semi:620; --fw-bold:720;
  --eyebrow-ls:.9px;

  /* ── elevation + motion ───────────────────────────────────────────────── */
  --shadow:0 8px 30px rgba(0,0,0,.4);
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --dur:.14s; --ease:ease;
}

/* ── reset / base ───────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-md)/1.55 var(--font);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ── typography helpers ─────────────────────────────────────────────────── */
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--eyebrow-ls);color:var(--text-faint);font-weight:var(--fw-semi);}
.muted{color:var(--text-faint);font-size:var(--fs-xs);}
.mono{font-family:var(--font-mono);}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
     padding:8px 13px;cursor:pointer;font:var(--fw-medium) var(--fs-md)/1 var(--font);color:var(--text);
     display:inline-flex;align-items:center;gap:7px;transition:border-color var(--dur) var(--ease),background var(--dur),filter var(--dur);}
.btn:hover{border-color:var(--border-strong);}
.btn:disabled{opacity:.55;cursor:default;}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--accent-grad);border-color:transparent;color:var(--accent-fg);font-weight:var(--fw-semi);box-shadow:var(--accent-glow);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary svg{stroke:var(--accent-fg);}
.btn-success{background:var(--success);border-color:var(--success);color:#04210c;}
.btn-danger{color:#ffb4a3;border-color:#4a2318;background:#221310;}
.btn-danger:hover{border-color:var(--danger);}
.btn-ghost{background:transparent;}

/* ── inputs ─────────────────────────────────────────────────────────────── */
.field{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 9px;color:var(--text);font:var(--fs-md) var(--font);width:100%;}
.field:focus{outline:none;border-color:var(--accent);}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.panel{background:var(--surface) var(--gloss);border:1px solid var(--border);border-radius:var(--r-lg);}
.panel-header{padding:var(--sp-4) 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--sp-3);}
.panel-header h3{margin:0;font-size:var(--fs-md);font-weight:var(--fw-semi);}
.panel-body{padding:var(--sp-4) 18px;}

/* ── pills / tags / chips / badges ──────────────────────────────────────── */
.pill{font-size:11.5px;font-weight:var(--fw-semi);padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.approved{color:var(--success);background:var(--success-soft);}
.pill.needs_review{color:var(--warning);background:var(--warning-soft);}
.pill.denied{color:var(--danger);background:var(--danger-soft);}
.pill.idea{color:var(--text-muted);background:var(--surface-2);}
.pill.rendered{color:var(--accent);background:var(--accent-soft);}
.pill.published{color:var(--accent-tint);background:var(--accent-soft);}
.tag{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:var(--r-pill);letter-spacing:.5px;}
.tag-sq{border-radius:var(--r-sm);}
.chip{font-size:var(--fs-sm);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;color:var(--text-muted);}
.chip:hover{border-color:var(--border-strong);color:var(--text);}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-tint);}
.badge{font-size:var(--fs-xs);padding:1px 7px;border-radius:var(--r-sm);}
.badge-err{color:var(--danger);background:var(--danger-soft);}
.badge-warn{color:var(--warning);background:var(--warning-soft);}
.badge-fix{color:var(--success);background:var(--success-soft);}

/* ── stat card ──────────────────────────────────────────────────────────── */
.stat{background:var(--surface) var(--gloss);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) 18px;position:relative;overflow:hidden;}
.stat .stat-n{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.5px;line-height:1;}
.stat .stat-l{color:var(--text-muted);font-size:var(--fs-sm);margin-top:7px;}
.stat .stat-stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.stat.is-tot .stat-stripe{background:var(--accent);}
.stat.is-ok .stat-stripe{background:var(--success);} .stat.is-ok .stat-n{color:var(--success);}
.stat.is-warn .stat-stripe{background:var(--warning);} .stat.is-warn .stat-n{color:var(--warning);}
.stat.is-err .stat-stripe{background:var(--danger);} .stat.is-err .stat-n{color:var(--danger);}

/* ── table ──────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;}
.table thead th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);
     font-weight:var(--fw-semi);padding:10px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);}
.table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;}
.table tbody tr{cursor:pointer;}
.table tbody tr:hover{background:var(--surface-2);}

/* ── modal ──────────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(4,7,12,.66);backdrop-filter:blur(2px);display:none;place-items:center;z-index:50;padding:var(--sp-6);}
.scrim.open{display:grid;}
.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-xl);width:min(680px,100%);
     max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden;}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:var(--sp-3);}
.modal-header h2{margin:0;font-size:17px;}
.modal-body{padding:var(--sp-5) 22px;overflow:auto;flex:1;}
.modal-footer{padding:var(--sp-4) 22px;border-top:1px solid var(--border);display:flex;gap:var(--sp-3);}

/* ── empty state ────────────────────────────────────────────────────────── */
.empty{color:var(--text-muted);text-align:center;padding:60px 20px;}
.empty svg{width:40px;height:40px;opacity:.3;margin-bottom:var(--sp-3);}

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--surface-3);
     border:1px solid var(--accent);padding:11px 18px;border-radius:11px;opacity:0;transition:var(--dur);z-index:60;pointer-events:none;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}