/* ─────────────────────────────────────────────────────────────
   Super Agency System — MVP Design Tokens
   Shared across all internal app screens. RTL-first.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ── Surfaces ─────────────────────────────────────────── */
  --cream:#F7F2E8;          /* main app background */
  --cream-2:#EFE8D8;        /* sidebar / sunken */
  --paper:#FFFDF8;          /* card surface */
  --paper-2:#FDF9F0;        /* hover / nested card */
  --paper-3:#FAF5E8;        /* table row hover */

  /* ── Ink (text) ───────────────────────────────────────── */
  --ink:#161413;            /* primary */
  --ink-2:#3A3734;          /* secondary */
  --muted:#7A726A;          /* tertiary / labels */
  --muted-2:#A89F94;        /* placeholder */

  /* ── Lines ────────────────────────────────────────────── */
  --line:#1614130F;         /* hairline, very subtle */
  --line-2:#1614131F;       /* default border */
  --line-3:#1614133A;       /* emphasized */
  --line-dashed: #1614132A;

  /* ── Brand accents ────────────────────────────────────── */
  --tangerine:#FF6B2C;
  --tangerine-soft:#FFE4D3;
  --tangerine-ink:#A03D14;
  --butter:#FFD23F;
  --butter-soft:#FFF3C4;
  --coral:#FF4B4B;

  /* ── Status colors ────────────────────────────────────── */
  --sage:#6BAE75;           /* success / active */
  --sage-soft:#D5EBD9;
  --sage-ink:#2D5A38;
  --forest:#2D4A3E;

  --sky:#92C9E8;            /* info / neutral status */
  --sky-soft:#E0F0F9;
  --sky-ink:#1F5A7F;

  --plum:#5E3A8B;
  --lilac:#C9A6FF;
  --lilac-soft:#EADFFF;

  --pink:#FFB5D8;
  --pink-soft:#FFE2EE;

  --amber:#F59E0B;          /* warning / attention */
  --amber-soft:#FEF0D1;
  --amber-ink:#7A4D08;

  --rose:#E84B67;           /* error / danger */
  --rose-soft:#FFDEE3;
  --rose-ink:#8A1F33;

  /* ── Platform colors (Paid Media) ─────────────────────── */
  --meta:#0866FF;
  --meta-soft:#DCE9FF;
  --google:#4285F4;
  --google-soft:#DBE8FD;
  --tiktok:#161413;
  --tiktok-soft:#E5E5E5;
  --tiktok-accent:#25F4EE;
  --snap:#FFFC00;
  --snap-soft:#FFFDC2;
  --snap-ink:#5A5800;

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans:'Readex Pro','Rubik',system-ui,sans-serif;
  --font-serif:'Fraunces',serif;
  --font-mono:'Space Mono',monospace;

  /* ── Spacing scale (4-step) ───────────────────────────── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --s-9:48px; --s-10:64px;

  /* ── Radius ───────────────────────────────────────────── */
  --r-xs:4px;  --r-sm:6px;  --r-md:10px;
  --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-full:999px;

  /* ── Shadows (paper, soft) ────────────────────────────── */
  --sh-1:0 1px 2px rgba(22,20,19,.04);
  --sh-2:0 2px 8px rgba(22,20,19,.06), 0 1px 2px rgba(22,20,19,.04);
  --sh-3:0 8px 24px rgba(22,20,19,.08), 0 2px 6px rgba(22,20,19,.05);
  --sh-pop:0 18px 48px rgba(22,20,19,.16), 0 4px 12px rgba(22,20,19,.08);

  /* ── Z ─────────────────────────────────────────────── */
  --z-side:50; --z-top:60; --z-drawer:80; --z-modal:90; --z-toast:100;
}

/* ── Reset ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";
}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
img,svg{display:block;max-width:100%}

/* ── Type primitives ──────────────────────────────────── */
.serif{font-family:var(--font-serif);font-feature-settings:"ss01"}
.mono{font-family:var(--font-mono)}
.italic{font-style:italic}

.h-display{font-family:var(--font-serif);font-weight:500;font-size:34px;letter-spacing:-0.025em;line-height:1.1}
.h-page{font-family:var(--font-serif);font-weight:500;font-size:26px;letter-spacing:-0.02em;line-height:1.15}
.h-section{font-family:var(--font-serif);font-weight:500;font-size:20px;letter-spacing:-0.015em;line-height:1.2}
.h-card{font-size:14px;font-weight:600;color:var(--ink)}
.lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);font-weight:600}
.body{font-size:13px;color:var(--ink-2);line-height:1.5}
.tiny{font-size:11px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Highlight underline (butter swash) */
.swash{position:relative;display:inline-block}
.swash::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-4px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 50 1 100 5 T 198 4' stroke='%23FFD23F' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}

/* ── Status pills ─────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%}
.pill-active{background:var(--sage-soft);color:var(--sage-ink)}.pill-active::before{background:var(--sage)}
.pill-paused{background:var(--cream-2);color:var(--muted)}.pill-paused::before{background:var(--muted)}
.pill-draft{background:var(--paper-2);color:var(--ink-2);border:1px dashed var(--line-3)}.pill-draft::before{background:var(--line-3)}
.pill-review{background:var(--amber-soft);color:var(--amber-ink)}.pill-review::before{background:var(--amber)}
.pill-error{background:var(--rose-soft);color:var(--rose-ink)}.pill-error::before{background:var(--rose)}
.pill-info{background:var(--sky-soft);color:var(--sky-ink)}.pill-info::before{background:var(--sky)}
.pill-archived{background:transparent;color:var(--muted-2);border:1px solid var(--line-2)}.pill-archived::before{background:var(--muted-2)}

/* ── Platform chips ───────────────────────────────────── */
.plat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}
.plat-meta{background:var(--meta-soft);color:var(--meta)}
.plat-google{background:var(--google-soft);color:var(--google)}
.plat-tiktok{background:var(--tiktok-soft);color:var(--tiktok)}
.plat-snap{background:var(--snap-soft);color:var(--snap-ink)}
.plat .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.plat-meta .dot{background:var(--meta)}
.plat-google .dot{background:var(--google)}
.plat-tiktok .dot{background:var(--tiktok)}
.plat-snap .dot{background:var(--snap);outline:1px solid var(--snap-ink)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;line-height:1;transition:all .15s;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--ink-2)}
.btn-accent{background:var(--tangerine);color:#fff}
.btn-accent:hover{background:#E55B22}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--paper)}
.btn-text{background:transparent;color:var(--ink-2);padding:6px 10px}
.btn-text:hover{color:var(--ink);background:var(--paper)}
.btn-disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-future{background:var(--paper);color:var(--muted);border:1px dashed var(--line-3);cursor:not-allowed}
.btn-future::before{content:"⌁";margin-inline-end:4px}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm)}

/* ── Card ─────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}

/* ── Tab bar ──────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:12px 16px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--ink);border-color:var(--tangerine);font-weight:600}
.tab .count{background:var(--cream-2);padding:1px 7px;border-radius:var(--r-full);font-size:10px;color:var(--muted);font-weight:600}
.tab.active .count{background:var(--tangerine-soft);color:var(--tangerine-ink)}

/* ── Skeleton ─────────────────────────────────────────── */
.sk{background:linear-gradient(90deg,var(--cream-2) 0%,var(--paper-2) 50%,var(--cream-2) 100%);background-size:200% 100%;animation:sk 1.4s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Helpers ──────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:var(--s-3)}
.col{display:flex;flex-direction:column;gap:var(--s-3)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.grow{flex:1;min-width:0}
.hidden{display:none}
.scroll-y{overflow-y:auto}

/* ── Avatar ───────────────────────────────────────────── */
.av{width:32px;height:32px;border-radius:50%;background:var(--tangerine);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-serif);font-size:14px;flex-shrink:0}
.av-sm{width:24px;height:24px;font-size:11px}
.av-lg{width:44px;height:44px;font-size:18px}
.av-stack{display:inline-flex}
.av-stack .av{margin-inline-start:-8px;border:2px solid var(--paper)}
.av-stack .av:first-child{margin-inline-start:0}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid var(--cream)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}