/* =====================================================================
   theme.css — SVS Social design tokens + Bootstrap 5 skin.
   Signed-off direction (mockup "Cadence UI Preview", 2026-08-27).
   Load AFTER bootstrap.min.css. Bootstrap is used for grid + utilities;
   its component look is remapped here via --bs-* variables.
   ===================================================================== */

:root {
  /* ---- palette (light) ---- */
  --paper:#faf9f6; --surface:#ffffff; --sunk:#f1efe9; --raised:#ffffff;
  --ink:#211f1b; --text:#423e38; --text-soft:#726a5f;
  --line:#e6e2d9; --line-strong:#d5cec0;
  --brand:#1c6b5a; --brand-deep:#145447; --brand-tint:#e1ede9; --brand-on:#ffffff;
  --amber:#c67a2e; --amber-text:#9c5e1c; --amber-tint:#f6ead9;
  --ok:#2e7d52; --warn:#b5761f; --danger:#b23a2e; --info:#3b6b98;
  --ok-tint:#e2efe6; --danger-tint:#f6e3e0; --warn-tint:#f6ecd9;
  --fb:#1877f2; --ig:#d6357e; --pin:#e60023;

  /* ---- shape + depth ---- */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(33,31,27,.05), 0 1px 3px rgba(33,31,27,.04);
  --sh-2:0 4px 12px rgba(33,31,27,.07), 0 2px 4px rgba(33,31,27,.04);
  --sh-3:0 12px 32px rgba(33,31,27,.12), 0 4px 8px rgba(33,31,27,.06);

  /* ---- type ---- */
  --f-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --f-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ---- spacing scale (dashboard density) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper:#171613; --surface:#201e1a; --sunk:#1a1815; --raised:#262420;
    --ink:#f2efe8; --text:#d8d2c6; --text-soft:#968e7d;
    --line:#322e28; --line-strong:#443f36;
    --brand:#3fbba3; --brand-deep:#59c9b2; --brand-tint:#143029; --brand-on:#12100d;
    --amber:#dda35a; --amber-text:#e0ab68; --amber-tint:#332818;
    --ok:#4fb37d; --warn:#dda35a; --danger:#e0685a; --info:#6fa0ce;
    --ok-tint:#153025; --danger-tint:#33211d; --warn-tint:#332a18;
    --fb:#4a92f5; --ig:#e761a0; --pin:#f2586f;
    --sh-1:0 1px 2px rgba(0,0,0,.35);
    --sh-2:0 6px 16px rgba(0,0,0,.4);
    --sh-3:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --paper:#171613; --surface:#201e1a; --sunk:#1a1815; --raised:#262420;
  --ink:#f2efe8; --text:#d8d2c6; --text-soft:#968e7d;
  --line:#322e28; --line-strong:#443f36;
  --brand:#3fbba3; --brand-deep:#59c9b2; --brand-tint:#143029; --brand-on:#12100d;
  --amber:#dda35a; --amber-text:#e0ab68; --amber-tint:#332818;
  --ok:#4fb37d; --warn:#dda35a; --danger:#e0685a; --info:#6fa0ce;
  --ok-tint:#153025; --danger-tint:#33211d; --warn-tint:#332a18;
  --fb:#4a92f5; --ig:#e761a0; --pin:#f2586f;
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 6px 16px rgba(0,0,0,.4);
  --sh-3:0 16px 40px rgba(0,0,0,.5);
}

/* ---- Bootstrap variable remap ---- */
:root {
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--text);
  --bs-emphasis-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r);
  --bs-border-radius-sm:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-font-sans-serif:var(--f-ui);
  --bs-primary:var(--brand);
  --bs-primary-rgb:28,107,90;
  --bs-link-color:var(--brand-deep);
  --bs-link-hover-color:var(--brand);
  --bs-secondary-color:var(--text-soft);
  --bs-tertiary-bg:var(--sunk);
  --bs-heading-color:var(--ink);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) { }
:root[data-theme="dark"] { --bs-primary-rgb:63,187,163; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bs-primary-rgb:63,187,163; } }

/* ---- base ---- */
* { box-sizing:border-box; }
body {
  background:var(--paper); color:var(--text);
  font-family:var(--f-ui); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4 {
  font-family:var(--f-display); color:var(--ink); line-height:1.15; letter-spacing:-.01em; font-weight:600;
}
a { color:var(--brand-deep); text-underline-offset:2px; }
a:hover { color:var(--brand); }
code,kbd,samp,.mono { font-family:var(--f-mono); font-size:.92em; }
::selection { background:var(--brand-tint); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
hr { border-color:var(--line); opacity:1; }
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* ---- surfaces ---- */
.surface  { background:var(--surface); }
.sunk     { background:var(--sunk); }
.card-x {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.eyebrow {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft);
}
.text-soft { color:var(--text-soft)!important; }
.tabular   { font-variant-numeric:tabular-nums; }

/* ---- buttons (own treatment; sits over Bootstrap .btn) ---- */
.btn { --bs-btn-border-radius:var(--r); font-weight:600; }
.btn-brand {
  background:var(--brand); border:1px solid var(--brand); color:var(--brand-on);
}
.btn-brand:hover { background:var(--brand-deep); border-color:var(--brand-deep); color:var(--brand-on); }
.btn-quiet {
  background:transparent; border:1px solid transparent; color:var(--text-soft);
}
.btn-quiet:hover { background:var(--sunk); color:var(--ink); }
.btn-outline-x {
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);
}
.btn-outline-x:hover { border-color:var(--text-soft); color:var(--ink); }

/* ---- pills / chips / dots / ai badge ---- */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); line-height:1.4;
}
.pill svg { width:11px; height:11px; }
.pill-ok     { background:var(--ok-tint);     color:var(--ok); }
.pill-warn   { background:var(--warn-tint);   color:var(--warn); }
.pill-danger { background:var(--danger-tint); color:var(--danger); }
.pill-draft  { background:var(--sunk);        color:var(--text-soft); }
.pill-sched  { background:var(--brand-tint);  color:var(--brand-deep); }

.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; padding:4px 9px;
  background:var(--sunk); color:var(--text); border:1px solid var(--line); border-radius:var(--r-pill);
}

.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-fb{ background:var(--fb); } .dot-ig{ background:var(--ig); } .dot-pin{ background:var(--pin); }

.badge-ai {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:var(--amber-text); background:var(--amber-tint);
  border-radius:var(--r-pill); padding:3px 9px;
}

/* ---- forms ---- */
.form-control, .form-select {
  background:var(--surface); border-color:var(--line-strong); color:var(--text);
  border-radius:var(--r);
}
.form-control:focus, .form-select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:var(--surface); color:var(--text);
}
.form-label { font-size:12px; font-weight:600; color:var(--text-soft); margin-bottom:6px; }

/* ---- flash / alerts ---- */
.flash {
  border:1px solid var(--line); border-left:3px solid var(--text-soft);
  background:var(--surface); border-radius:var(--r); padding:10px 14px; font-size:13.5px; box-shadow:var(--sh-1);
}
.flash-success { border-left-color:var(--ok); }
.flash-danger  { border-left-color:var(--danger); }
.flash-warning { border-left-color:var(--warn); }
.flash-info    { border-left-color:var(--info); }