/* =============================================================================
   superviral.money — design tokens
   Dark-cinematic, media-forward. We OWN an electric-violet→cyan "viral" gradient
   with a warm ember accent — distinct from the cold-blue (Creatify/Higgsfield)
   and the magenta-violet (Blotato/Postiz) camps every competitor lives in.
   ========================================================================== */
:root {
  /* --- surfaces (layered near-blacks, faint cool undertone — never pure #000) --- */
  --bg:        #06060c;
  --bg-2:      #0b0a16;
  --bg-3:      #12101f;
  --surface:   #100e1d;
  --surface-2: #161427;
  --glass:     rgba(18, 16, 31, 0.62);
  --border:        rgba(124, 77, 255, 0.16);
  --border-2:      rgba(124, 77, 255, 0.30);
  --border-soft:   rgba(255, 255, 255, 0.07);

  /* --- brand: electric violet (the ownable accent) --- */
  --accent:      #7c4dff;
  --accent-2:    #a06bff;
  --accent-deep: #5a27e0;
  --viral-cyan:  #22e3ff;

  /* signature gradients */
  --grad-viral: linear-gradient(115deg, #7c4dff 0%, #b15cff 38%, #22e3ff 100%);
  --grad-text:  linear-gradient(100deg, #c9b6ff 0%, #e6c9ff 42%, #8be9ff 100%);
  --grad-soft:  linear-gradient(135deg, rgba(124,77,255,.22), rgba(34,227,255,.12));

  /* --- warm cinematic ember (secondary accent — escapes the blue cliché) --- */
  --ember:    #ff5a3c;
  --ember-2:  #ff9d42;
  --grad-ember: linear-gradient(100deg, #ff5a3c, #ff9d42);

  /* --- text --- */
  --fg:   #f4f2ff;
  --fg-2: #b9b4d4;
  --fg-3: #807aa3;
  --fg-4: #5a5577;

  /* --- glows --- */
  --glow-violet: rgba(124, 77, 255, 0.5);
  --glow-cyan:   rgba(34, 227, 255, 0.4);
  --glow-ember:  rgba(255, 90, 60, 0.4);

  /* --- status / semantic --- */
  --green: #2bd97a;   /* live, consent-ok, success */
  --amber: #ffb020;
  --red:   #ff4d4d;
  --mcp:   #22e3ff;   /* cyan = agent / automation active */

  /* --- type: three-font system (display + grotesque body + mono "agent tell") --- */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* fluid type scale */
  --fs-eyebrow: 0.72rem;
  --fs-body:    1.05rem;
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.32rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-display: clamp(3rem, 1.7rem + 6vw, 7rem);

  /* --- shape & motion --- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;
  --maxw: 1200px;
  --gutter: clamp(1.1rem, 5vw, 3rem);

  /* one signature easing curve (premium spring-out) used everywhere */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 26px 64px -24px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 0 1px var(--border-2), 0 30px 90px -28px var(--glow-violet);
}