/* The Signal on NEAR: design tokens (see brand/BRAND.md).
   Plain CSS custom properties, no build step, no imports.
   Role names (--bg, --panel, --ink, --mint, --mint-hi, --mint-ink, ...) match the ones site/index.html and
   signal-dashboard/index.html already define, so either page can drop its own :root block and use this file.
   Fonts are NOT loaded here: keep the Google Fonts <link> in each page's <head>. */

:root {
  color-scheme: dark;

  /* ---- Palette: night water ---- */
  --night: #0A0E1A;   /* page background */
  --deep: #121930;    /* cards, panels */
  --swell: #161E35;   /* raised: hover, tooltips, inputs */
  --foam: #E8ECF6;    /* primary text */
  --mist: #B9C1D9;    /* secondary text */
  --haze: #8A95B2;    /* captions, meta, timestamps (5.5:1 or better on every surface) */
  --slate: #5E6A92;   /* inactive UI that must stay visible (3:1). Replaces #4A5578 */
  --signal-mint: #37E2B0; /* the brand colour: live, positive, primary action */
  --glow: #6DEDC8;    /* mint hover / highlight */
  --kelp: #04150F;    /* text on mint */
  --sky: #5CC8FF;     /* whale moves, info, Analyst tier */
  --lilac: #C9A2FF;   /* smart money, Insider tier */
  --amber: #FFB547;   /* volume spikes, attention, time-limited notes */
  --coral: #FF6B6B;   /* sells, liquidity pulls, risk, errors */

  /* Light surfaces (docs, print, white listing pages) */
  --paper: #FFFFFF;
  --paper-2: #F4F6FB;
  --mint-on-light: #06785A; /* mint for text/marks on light backgrounds (5.5:1 on white) */

  /* ---- Roles (names already used by the site and the dashboard) ---- */
  --bg: var(--night);
  --panel: var(--deep);
  --panel-2: var(--swell);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --ink: var(--foam);
  --ink-2: var(--mist);
  --ink-3: var(--haze);
  --mint: var(--signal-mint);
  --mint-dim: rgba(55, 226, 176, .14);
  --mint-hi: var(--glow);
  --on-mint: var(--kelp);
  --mint-ink: var(--kelp); /* landing name for "text on mint" */
  --sky-dim: rgba(92, 200, 255, .14);
  --lilac-dim: rgba(201, 162, 255, .14);
  --amber-dim: rgba(255, 181, 71, .14);
  --rose: var(--coral);
  --rose-dim: rgba(255, 107, 107, .14);
  --coral-dim: var(--rose-dim);
  /* 12% tints, the landing's names */
  --mint-12: rgba(55, 226, 176, .12);
  --sky-12: rgba(92, 200, 255, .12);
  --lilac-12: rgba(201, 162, 255, .13);
  --amber-12: rgba(255, 181, 71, .12);

  /* ---- Tiers: the signal gets clearer as you go up ---- */
  --tier-scout: var(--mist);
  --tier-analyst: var(--sky);
  --tier-insider: var(--lilac);
  --tier-whale: var(--mint);
  --tier-scout-dim: rgba(185, 193, 217, .12);
  --tier-analyst-dim: var(--sky-dim);
  --tier-insider-dim: var(--lilac-dim);
  --tier-whale-dim: var(--mint-dim);

  /* ---- Alert types ---- */
  --alert-whale-buy: var(--sky);
  --alert-sell: var(--coral);
  --alert-launch: var(--mint);
  --alert-volume: var(--amber);
  --alert-smart-money: var(--lilac);
  --alert-liquidity: var(--coral);
  --verdict-ok: var(--mint);      /* safety check: few red flags */
  --verdict-caution: var(--amber);/* some red flags */
  --verdict-risk: var(--coral);   /* many red flags */

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font-display); /* dashboard alias */
  --sans: var(--font-text);       /* dashboard alias */
  --fs-hero: clamp(52px, 7vw, 96px);
  --fs-h2: clamp(40px, 5vw, 60px);
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-lead: 21px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --lh-display: 1.02;
  --lh-body: 1.6;
  --track-display: -.03em;
  --track-title: -.01em;

  /* ---- Shape ---- */
  --r-xs: 10px;   /* tooltips, small inputs */
  --r-sm: 14px;   /* icon tiles, tier boxes */
  --r-md: 18px;   /* compact cards, FAQ rows */
  --r-lg: 24px;   /* cards */
  --r-xl: 32px;   /* feature bands, CTA blocks */
  --r-pill: 999px;/* buttons, chips */

  /* ---- Layout (landing) ---- */
  --gutter: clamp(16px, 4.5vw, 56px);
  --section: clamp(88px, 11vw, 152px);

  /* ---- Depth and light ---- */
  --shadow-card: 0 20px 50px rgba(0, 0, 0, .35);
  --shadow-mint: 0 10px 30px rgba(55, 226, 176, .25);
  --glow-mint: radial-gradient(900px 620px at 78% 260px, rgba(55, 226, 176, .13), rgba(55, 226, 176, 0) 70%);
  --glow-sky: radial-gradient(700px 500px at 8% 100%, rgba(92, 200, 255, .07), rgba(92, 200, 255, 0) 70%);

  /* ---- Focus and motion ---- */
  --focus-ring: 2px solid var(--mint);
  --focus-offset: 3px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .15s;
  --t-med: .3s;
}