/* ═══════════════════════════════════════════════════════════
   SaaSassins — Design Tokens (Template / Styling Guide)
   Single source of truth for the re-theme. Edit this file to
   re-skin the entire site without touching style.css.

   Palette: blood red · near-black · charcoal gradient · metallic silver
   Derived from the SaaSassins logo (dark ninja mark + red accents
   + silver sheen on wordmark).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Red (primary accent) ── */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;   /* base red */
  --red-600: #dc2626;   /* brand red — matches logo */
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* ── Charcoal Gradient Stops (replaces PolishPoint "cyan") ── */
  --char-300: #9ca3af;
  --char-400: #6b7280;
  --char-500: #4b5563;
  --char-600: #374151;
  --char-700: #1f2937;
  --char-800: #111827;

  /* ── Silver / Steel Highlights (replaces PolishPoint "green") ── */
  --silver-200: #f3f4f6;
  --silver-300: #e5e7eb;
  --silver-400: #d1d5db;
  --silver-500: #c0c0c0;  /* metallic silver */
  --silver-600: #9ca3af;
  --silver-700: #6b7280;

  /* ── Dark Surfaces (page + cards) ── */
  --dark-950: #050505;    /* page base — pure near-black */
  --dark-900: #0a0a0a;
  --dark-800: #111111;
  --dark-700: #1a1a1a;
  --dark-600: #262626;
  --dark-500: #404040;

  /* ── Text ── */
  --text-primary:   #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted:     #737373;
  --text-accent:    #ef4444;

  /* ── Signature Gradients ── */
  /* NOTE: brand gradient is red → silver only — NO black middle. The black
     mid-stop killed contrast on mid-range characters in gradient text. */
  --gradient-brand:         linear-gradient(120deg, #ef4444 0%, #dc2626 28%, #9ca3af 68%, #e5e7eb 100%);
  --gradient-brand-reverse: linear-gradient(120deg, #e5e7eb 0%, #9ca3af 32%, #dc2626 72%, #ef4444 100%);
  --gradient-blade:         linear-gradient(135deg, #ef4444 0%, #7f1d1d 100%);        /* strike CTAs */
  --gradient-steel:         linear-gradient(180deg, #f5f5f5 0%, #c0c0c0 45%, #525252 100%); /* metallic text */
  --gradient-red:           linear-gradient(135deg, #b91c1c, #ef4444);
  --gradient-glow:          linear-gradient(135deg, rgba(220,38,38,.15), rgba(26,26,26,.1), rgba(192,192,192,.05));
  --gradient-card:          linear-gradient(145deg, rgba(26,26,26,.8), rgba(10,10,10,.9));
  --gradient-glass:         linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

  /* ── Shadows & Glows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --shadow-glow-red:    0 0 40px rgba(220,38,38,.25);
  --shadow-glow-silver: 0 0 40px rgba(192,192,192,.12);
  --shadow-glow-blade:  0 0 48px rgba(239,68,68,.35);

  /* ── Spacing ── */
  --section-pad: clamp(80px, 12vw, 160px);
  --container-max: 1200px;
  --container-wide: 1400px;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Fonts ── */
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Honor user reduced-motion preference — gate all infinite animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}