/* ============================================================
   The Marketing Software — TMS umbrella brand layer
   Sits on top of design-tokens.css. Defines the TMS palette
   and per-module accent colors. Indigo is reserved for the
   Echo (ReputationRadar) module.
   ============================================================ */

:root {
  /* TMS primary — deep teal/emerald. Distinct from RR indigo,
     shares the cool, technical, trustworthy register. */
  --tms-primary-50:  #ecfeff;
  --tms-primary-100: #cffafe;
  --tms-primary-200: #a5f3fc;
  --tms-primary-300: #67e8f9;
  --tms-primary-400: #22d3ee;
  --tms-primary-500: #06b6d4;
  --tms-primary-600: #0891b2;
  --tms-primary-700: #0e7490;
  --tms-primary-800: #155e75;
  --tms-primary-900: #164e63;

  /* TMS deep — for hero backgrounds and dark surfaces.
     Slightly cooler than RR navy (#0b1120) — leans cyan. */
  --tms-ink-950: #050b14;
  --tms-ink-900: #07101e;
  --tms-ink-800: #0c1a2e;
  --tms-ink-700: #142a44;

  /* TMS signature gradient — emerald → teal → cyan.
     Used on suite-level CTAs only. Modules use their own accent. */
  --tms-cta-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --tms-cta-gradient-soft: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(6,182,212,0.15));
  --tms-cta-shadow: 0 8px 20px rgba(6, 182, 212, 0.32);
  --tms-cta-shadow-hover: 0 12px 28px rgba(6, 182, 212, 0.45);

  /* Hero glows for TMS — emerald, cyan, soft white */
  --tms-glow-emerald: rgba(16, 185, 129, 0.30);
  --tms-glow-cyan:    rgba(6, 182, 212, 0.28);
  --tms-glow-aurora:  rgba(125, 211, 252, 0.20);

  /* ----------- Per-module accent colors -------------------------------
     Each app in the suite gets its own color so a packed dashboard
     reads instantly. Keep them all desaturated-cool to stay coherent. */
  --module-rang-500:    #0891b2;  /* Rang — cyan, ranks/positions */
  --module-inspekt-500: #6366f1;  /* Inspekt — indigo */
  --module-spinne-500:  #f59e0b;  /* Spinne — amber, backlinks */
  --module-echo-500:    #4f46e5;  /* Echo — RR indigo, reputation */
  --module-texter-500:  #ec4899;  /* Texter — pink, content */
  --module-puls-500:    #22c55e;  /* Puls — green, social */
  --module-spaeher-500: #ef4444;  /* Späher — red, ads/competitive */

  /* Tinted backgrounds for module cards (8% alpha of accent) */
  --module-rang-bg:    rgba(8, 145, 178, 0.08);
  --module-inspekt-bg: rgba(99, 102, 241, 0.08);
  --module-spinne-bg:  rgba(245, 158, 11, 0.08);
  --module-echo-bg:    rgba(79, 70, 229, 0.08);
  --module-texter-bg:  rgba(236, 72, 153, 0.08);
  --module-puls-bg:    rgba(34, 197, 94, 0.08);
  --module-spaeher-bg: rgba(239, 68, 68, 0.08);

  --module-rang-tint:    rgba(8, 145, 178, 0.16);
  --module-inspekt-tint: rgba(99, 102, 241, 0.16);
  --module-spinne-tint:  rgba(245, 158, 11, 0.16);
  --module-echo-tint:    rgba(79, 70, 229, 0.16);
  --module-texter-tint:  rgba(236, 72, 153, 0.16);
  --module-puls-tint:    rgba(34, 197, 94, 0.16);
  --module-spaeher-tint: rgba(239, 68, 68, 0.16);
}

/* The TMS logomark glyph: a stacked-spectrum bar (S = Suite).
   Reused inline; defined here for clarity. */

/* Mono-tabular numbers for stat cards */
.tabular { font-variant-numeric: tabular-nums; }

/* Full-bleed reset for prototype root */
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; }