/* ============================================================
   IS7X.XYZ — DESIGN TOKENS
   OptiRank Studio · Premium Red/White Dark Theme
   ============================================================ */

:root {

  /* BRAND PALETTE */
  --red-900:    #1A0000;
  --red-800:    #2D0000;
  --red-700:    #5C0000;
  --red-600:    #8B0000;
  --red-500:    #B71C1C;
  --red-400:    #D32F2F;
  --red-300:    #EF5350;
  --red-200:    #FF8A80;
  --red-glow:   rgba(183, 28, 28, 0.35);
  --red-glow-sm:rgba(183, 28, 28, 0.18);

  /* SURFACES */
  --color-bg:        #080808;
  --color-surface:   #111111;
  --color-surface-2: #1A1A1A;
  --color-surface-3: #222222;
  --color-border:    rgba(255,255,255,0.07);
  --color-border-red:rgba(183,28,28,0.40);
  --color-divider:   rgba(255,255,255,0.05);

  /* TEXT */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255,255,255,0.70);
  --color-text-muted:     rgba(255,255,255,0.40);
  --color-text-accent:    var(--red-300);

  /* ACCENT ALIASES */
  --color-accent:      var(--red-500);
  --color-accent-h:    var(--red-400);
  --color-accent-glow: var(--red-glow);

  /* TYPOGRAPHY */
  --font-display: 'Rajdhani', 'Barlow Condensed', 'Impact', sans-serif;
  --font-body:    'Inter', 'DM Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* TYPE SCALE */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5.5rem;

  /* FONT WEIGHTS */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* LINE HEIGHTS */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-base:   1.6;
  --lh-loose:  1.8;

  /* SPACING 4px base */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px;

  /* BORDER RADIUS */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* SHADOWS */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.6);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.7);
  --shadow-glow:    0 0 28px var(--red-glow), 0 4px 16px rgba(0,0,0,0.6);
  --shadow-glow-lg: 0 0 60px var(--red-glow), 0 8px 32px rgba(0,0,0,0.8);

  /* Z-INDEX */
  --z-below:  -1;
  --z-base:    0;
  --z-card:   10;
  --z-sticky: 50;
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;

  /* MOTION */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-slow:   480ms;
  --dur-xslow:  700ms;

  /* LAYOUT */
  --container-max: 1240px;
  --container-pad: var(--space-6);
  --section-py:    var(--space-20);
  --nav-h:         72px;
  --nav-h-mobile:  60px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}