/* ============================================================
   WATCHTOWER — Design Tokens (navy + blue brief)
   Brand-safety / crisis monitoring SaaS.
   Headers: #0b1220 / #131c33 · Accent: #3b5bdb
   App bg: #f7f8fa · Cards: #fff · Borders: #e5e7eb
   Used by: landing.html, dashboard.html, superadmin.html
   ============================================================ */

:root {
  /* ─── Surface ─── */
  --bg:              #f7f8fa;   /* app background */
  --surface:         #ffffff;   /* cards */
  --surface-2:       #f1f3f7;   /* hover / sunken */
  --surface-3:       #e9edf3;   /* deeper fill */

  /* ─── Navy (headers, dark chrome) ─── */
  --navy:            #0b1220;   /* darkest — top bars, footer */
  --navy-2:          #131c33;   /* raised navy panels */
  --navy-3:          #1d2942;   /* navy hover / borders */
  --on-navy:         #eef2f9;   /* text on navy */
  --on-navy-muted:   #94a0b8;   /* secondary text on navy */
  --on-navy-subtle:  #5d6b86;

  /* ─── Border ─── */
  --border:          #e5e7eb;
  --border-2:        #d4d9e0;   /* stronger */
  --divider:         #eef0f3;

  /* ─── Text ─── */
  --ink:             #0b1220;   /* headings */
  --text:            #2b3140;   /* body */
  --text-muted:      #5f6878;   /* secondary */
  --text-subtle:     #8b94a3;   /* placeholder / meta */

  /* ─── Accent (blue) ─── */
  --accent:          #3b5bdb;
  --accent-hover:    #2f4ec4;
  --accent-press:    #2843a8;
  --accent-tint:     #e8edfc;   /* chip / fill */
  --accent-tint-2:   #d6e0fa;
  --accent-ink:      #1f3597;   /* AA text on accent-tint */

  /* ─── Status ─── */
  --pos:             #16a34a;   /* green · positive / verified */
  --pos-bg:          #dcfce7;
  --pos-ink:         #08612a;
  --neg:             #dc2626;   /* red · negative / crisis */
  --neg-bg:          #fee2e2;
  --neg-ink:         #8a1414;
  --warn:            #d97706;   /* amber · pending */
  --warn-bg:         #fef3c7;
  --warn-ink:        #7c4406;
  --neu:             #64748b;   /* gray · neutral */
  --neu-bg:          #eef1f5;
  --neu-ink:         #3f4757;

  /* ─── Platform pills ─── */
  --p-twitter:       #1d9bf0;  --p-twitter-bg:   #e3f2fd;  --p-twitter-ink:   #0a5fa8;
  --p-instagram:     #d6296b;  --p-instagram-bg: #fde7f0;  --p-instagram-ink: #8a134a;
  --p-tiktok:        #111827;  --p-tiktok-bg:    #e9edf3;  --p-tiktok-ink:    #111827;
  --p-youtube:       #e3342f;  --p-youtube-bg:   #fde8e7;  --p-youtube-ink:   #8a1614;
  --p-linkedin:      #0a66c2;  --p-linkedin-bg:  #e2eefb;  --p-linkedin-ink:  #074a8c;

  /* ─── Sentiment (signed) ─── */
  --sent-pos:        var(--pos);   --sent-pos-bg: var(--pos-bg);  --sent-pos-ink: var(--pos-ink);
  --sent-neg:        var(--neg);   --sent-neg-bg: var(--neg-bg);  --sent-neg-ink: var(--neg-ink);
  --sent-neu:        var(--neu);   --sent-neu-bg: var(--neu-bg);  --sent-neu-ink: var(--neu-ink);
  --sent-off:        #8b94a3;      --sent-off-bg: #eef1f5;        --sent-off-ink: #5f6878;

  /* ─── Chart categorical ─── */
  --c-1: #3b5bdb;   /* accent blue */
  --c-2: #16a34a;   /* green */
  --c-3: #d97706;   /* amber */
  --c-4: #dc2626;   /* red */
  --c-5: #8b5cf6;   /* violet */
  --c-6: #0891b2;   /* cyan */

  /* ─── Elevation ─── */
  --shadow-card:   0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.04);
  --shadow-raised: 0 2px 4px rgba(11,18,32,.05), 0 8px 20px rgba(11,18,32,.07);
  --shadow-pop:    0 16px 40px rgba(11,18,32,.16), 0 4px 10px rgba(11,18,32,.08);
  --shadow-focus:  0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);

  /* ─── Radius ─── */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-2xl: 22px;  --r-pill: 999px;

  /* ─── Spacing (4px base) ─── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ─── Typography ─── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fz-xs: 12px; --fz-sm: 13px; --fz-body: 14px; --fz-lg: 16px;
  --fz-h6: 18px; --fz-h5: 22px; --fz-h4: 28px; --fz-h3: 36px; --fz-h2: 48px; --fz-h1: 60px;

  --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5;
  --ls-tight: -0.02em;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent-tint-2); color: var(--accent-ink); }