/* ============================================================
   SocialPulse Design System Tokens v2
   Single source of truth — import in every page
   ============================================================ */

:root {
  /* ---- Neutrals ---- */
  --bg:       #07070c;
  --bg2:      #0c0c14;
  --panel:    #10101c;
  --panel2:   #161626;
  --panel3:   #1c1c30;
  --line:     #1f1f33;
  --line2:    #2a2a45;
  --text:     #ecedf5;
  --text2:    #9a9ab8;   /* WCAG AA 4.6:1 on panel */
  --text3:    #5b5b7a;

  /* ---- Accents ---- */
  --indigo:      #6366f1;
  --indigo2:     #8b8cff;
  --indigo-soft: rgba(99,102,241,.14);
  --lime:        #c6ff3d;
  --lime-soft:   rgba(198,255,61,.12);
  --amber:       #f5b324;
  --amber-soft:  rgba(245,179,36,.12);
  --red:         #ff5577;
  --red-soft:    rgba(255,85,119,.10);
  --green:       #2dd48a;
  --green-soft:  rgba(45,212,138,.10);
  --blue:        #55a7ff;
  --purple:      #a855f7;
  --paper:       #f7f6f2;

  /* ---- Platform colors ---- */
  --fb:  #1877F2;
  --ig:  #E1306C;

  /* ---- Typography ---- */
  --font-ui:   'Inter', 'Noto Sans TC', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* ---- Radii ---- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  14px;
  --r-2xl: 18px;

  /* ---- Spacing (4pt base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 16px 48px -12px rgba(0,0,0,.7);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 350ms;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--indigo2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Utility classes ---- */
.mono { font-family: var(--font-mono); }
.uppercase { text-transform: uppercase; letter-spacing: .12em; }
.text2 { color: var(--text2); }
.text3 { color: var(--text3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }