/* ============================================================
   Tokwatch design template
   Edit this file to restyle every page. styles.css only references these
   tokens, and app.js reads the colour tokens for charts and chips, so a
   change here applies to all tabs at once.
   Basecoat's shadcn tokens (--background, --foreground, --card, --border,
   --muted, --muted-foreground, --primary, --ring, --radius, --sidebar…)
   come from the CDN build; override any of them in this block.
   ============================================================ */
:root{
  /* ---- Typography ---- */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-xs:12px;   /* footnotes, chips, table headers */
  --text-sm:13px;   /* secondary text, sidebar meta */
  --text-base:14px; /* body, table cells, controls */
  --text-md:15px;   /* card titles, sub-tabs */
  --text-lg:16px;   /* section titles inside cards */
  --text-xl:18px;   /* h2 */
  --text-2xl:20px;
  --text-h1:28px;
  --text-kpi:28px;  /* KPI tile value */
  --text-kpi-sm:22px;
  --text-stat:26px;
  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;
  --w-normal:400;
  --w-medium:500;
  --w-semibold:600;
  --w-display:650;
  --tracking-h1:-0.9px;
  --tracking-h2:-0.4px;
  --tracking-num:-0.8px;

  /* ---- Spacing (4px grid) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-9:36px; --sp-10:40px;
  --section-gap:24px;   /* between blocks on a page */
  --block-gap:16px;     /* between cards in a grid */

  /* ---- Radii (Basecoat derives --radius-sm/md/lg/xl from --radius) ---- */
  --radius:.625rem;
  --radius-full:9999px;

  /* ---- Controls: buttons, selects, inputs, toggles ---- */
  --control-h:36px;
  --control-h-sm:30px;
  --control-h-xs:24px;
  --control-px:12px;
  --control-text:var(--text-base);
  --icon:16px;
  --icon-sm:14px;
  --icon-xs:12px;

  /* ---- Layout ---- */
  --sidebar-w:232px;
  --topbar-h:64px;       /* height of the wordmark row at the top of the sidebar */
  --content-px:32px;
  --content-pt:40px;     /* above the page title; there is no bar over the content */
  --content-pb:28px;
  --card-px:20px;
  --card-py:18px;
  --table-px:14px;
  --table-py:12px;

  /* ---- Brand and semantic colours (keep literal values: app.js reads them) ---- */
  --brand:#18794e;         /* links, positive bars, focus accents */
  --brand-bg:#edf8f1;
  --positive:#2f8f5b;  --positive-bg:#edf8f1; --positive-fg:#18794e;
  --negative:#c94b43;  --negative-bg:#fff0ee; --negative-fg:#b23935;
  --mixed:#c48a1e;     --mixed-bg:#fff5df;    --mixed-fg:#906020;
  --neutral:#a1a1aa;
  --destructive:var(--negative-fg);  /* Basecoat's destructive button: Remove on the Dashboard */
  --unclear:#e4e4e7;
  --views:#e07b39;         /* views line in charts */
  --coverage-partial:#d97706;
  --warn-bg:#fff8e6; --warn-border:#f0dfae; --warn-fg:#7a5a1a; --warn-icon:#b7791f;
  --own-bg:#eef2ff; --own-fg:#3b4a9c;   /* "Official" / "Brand account" chips */
  --sponsored-bg:#fff5df; --sponsored-fg:#906020;   /* "Sponsored" chip on Brand mentions */
  /* Brand mentions traffic-segment checkboxes: @bialetti_italia, @bialetti_america, sponsored, organic */
  --seg-official-1:#3b4a9c; --seg-official-2:#0d9488; --seg-sponsored:#c48a1e; --seg-organic:#2f8f5b;
  --quote-border:#bed5c5;
  --quote-border-negative:#e2c7c5;

  /* ---- Keyword tags: branded / non-branded and search intent ---- */
  --branded:#2563eb; --nonbranded:#16a34a;
  --intent-informational:#0891b2; --intent-navigational:#7c3aed; --intent-commercial:#db2777; --intent-transactional:#ea580c;
  /* ---- Creator size tags on Top results: <10k User, 10k–100k Creator, >100k Influencer ---- */
  --tier-user:#64748b; --tier-creator:#0d9488; --tier-influencer:#9333ea;
  /* ---- Colour pills on Top results (Verified, Audio, Brand mention, On screen, Portrayal, Paid partnership) ---- */
  --pill-yes:var(--positive-fg); --pill-no:#64748b; --pill-flag:var(--mixed-fg); --pill-bad:var(--negative-fg); --pill-brand:var(--branded);

  /* ---- Bars and surfaces ---- */
  --bar-on:var(--foreground);
  --bar-off:var(--border);
  --bar-diff:var(--brand);
  --surface-ring:0 0 0 1px color-mix(in oklab,var(--foreground) 10%,transparent),0 1px 2px 0 rgba(0,0,0,.05);
  --surface-hover:0 6px 18px rgba(0,0,0,.08);
  --popover-shadow:0 8px 24px rgba(0,0,0,.12);

  /* ---- App-only tokens (hosted app; the demo does not use these) ---- */
  --form-max:520px;
  --content-max:1180px;
  --spinner-size:12px;
  --brand-card-min:240px;
  --avatar:40px;          /* profile picture on brand cards */
  --menu-min:160px;       /* row action menus */
  --dim-opacity:.35;      /* greyed-out result under a fetch overlay */

  /* ---- Landing page (views/home.js). Visual style of design/northstar-landing: Open Runde, ink on white,
     periwinkle accent, flat grey cards, floating dark pill nav. Change the accent here to re-brand the page. ---- */
  --lp-font:"Open Runde",Inter,sans-serif;
  --lp-tracking:-0.32px;
  --lp-ink:#181925; --lp-body:#666; --lp-muted:#999; --lp-faint:#b3b3b3;
  --lp-page:#fff; --lp-block:#fafafa; --lp-surface:rgba(0,0,0,.03); --lp-surface-2:rgba(0,0,0,.05); --lp-rule:#e0e0e0;
  --lp-accent:#918df6; --lp-accent-btn:#9580ff;
  --mark-ring:var(--lp-accent); --mark:28px; --mark-lp:26px;   /* logo mark: ring colour, size in the app sidebar, size on landing pages */
  --lp-wordmark:18px; --lp-wordmark-lh:24px; --lp-w-wordmark:600;   /* "tokwatch" next to the mark in the landing nav and footer */
  --lp-sky:#2c78fc; --lp-sky-soft:rgba(44,120,252,.08);
  --lp-green:#33c758;
  --lp-nav:#14141f; --lp-nav-fg:#bbbcc3;
  --lp-h1:60px; --lp-h1-lh:68px; --lp-h1-track:-3px;
  --lp-h1-sm:40px; --lp-h1-sm-lh:46px; --lp-h1-sm-track:-2px;
  --lp-h2:36px; --lp-h2-lh:44px; --lp-h2-track:-1.8px;
  --lp-h2-sm:28px; --lp-h2-sm-lh:34px; --lp-h2-sm-track:-1.2px;
  --lp-lead:18px; --lp-lead-lh:24px;      /* also h3 */
  --lp-text:16px; --lp-text-lh:24px;
  --lp-small:14px; --lp-small-lh:20px;
  --lp-micro:13px; --lp-micro-lh:18px;
  --lp-tiny:11px;
  --lp-w-regular:500; --lp-w-display:600;
  --lp-radius-card:16px; --lp-radius-block:24px; --lp-radius-panel:12px;
  --lp-page-max:1040px; --lp-nav-max:720px; --lp-prose-max:28rem; --lp-head-max:32rem; --lp-column:640px;
  --lp-nav-h:52px; --lp-nav-inset:16px;
  --lp-btn-h:44px; --lp-btn-h-sm:32px;
  --lp-section-gap:128px; --lp-section-gap-sm:96px;
  --lp-tick:16px; --lp-icon-tile:40px;
  --lp-auth-max:420px; --lp-input-h:44px; --lp-error:#c0362c;   /* sign in and sign up */
  --lp-main-top:104px; --lp-block-py:64px; --lp-head-gap:48px; --lp-footer-gap:112px;
  --lp-split-gap:64px; --lp-bar-h:10px; --lp-bar-radius:4px; --lp-bar:rgba(0,0,0,.12);   /* text beside a figure */
  --lp-stat:48px; --lp-stat-lh:52px;
  --lp-dash-side:200px; --lp-dash-title:24px; --lp-dash-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 60px -20px rgba(24,25,37,.18);   /* product picture under the hero */
  --lp-shot-h:340px; --lp-shot-mini-h:232px; --lp-shot-plot-h:96px; --lp-shot-thumb-w:184px; --lp-shot-col-w:24px; --lp-shot-thumb-a:#3a3b52; --lp-shot-thumb-b:#14141f; --lp-shot-thumb-w-sm:112px;   /* product-like pictures in the feature cards */

  /* ---- Sizes only the .ns skin below needs; everything else it takes from --lp-* ---- */
  --ns-control-h:40px;      /* buttons and selects inside a signed-in view */
  --ns-kpi:26px; --ns-kpi-sm:22px; --ns-kpi-track:-1.2px;
  --ns-section-gap:64px;    /* between the lookup/results and Browse */
  --ns-row-rule:rgba(0,0,0,.06);
  --ns-chart-h:240px;       /* plot height of areaChart */
  --ns-organic:#22a565;     /* second chart series beside the accent: organic views. Same weight as --lp-accent, 3:1 on white */
  --ns-nodata-min:168px;    /* a result with no data at all, under its Fetch overlay */
}

/* ---- North Star skin for signed-in views (views/research.js). Wrap a view in .ns and the app components inside it
   take the landing page's look: this block remaps the tokens above to their --lp-* counterparts, and the shape
   changes (pills, flat cards, stage panels) are at the end of styles.css. ---- */
.ns{
  --font-sans:var(--lp-font);
  --w-normal:var(--lp-w-regular); --w-medium:var(--lp-w-regular); --w-semibold:var(--lp-w-display); --w-display:var(--lp-w-display);
  --foreground:var(--lp-ink); --muted-foreground:var(--lp-body);
  --card:var(--lp-page); --border:var(--lp-rule); --input:var(--lp-rule); --muted:var(--lp-surface-2);
  --primary:var(--lp-accent-btn); --primary-foreground:#fff; --ring:var(--lp-accent);
  --brand:var(--lp-accent);
  --bar-on:var(--lp-ink); --bar-off:var(--lp-bar); --bar-diff:var(--lp-accent);
  --own-bg:var(--lp-sky-soft); --own-fg:var(--lp-sky);
  --surface-ring:none;
}