/* ═══════════════════════════════════════════════════════════
   IS7NOW.FUN — Design Tokens
   Theme: Plasma Red — Electric Scarlet × Ivory × Obsidian
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ── OBSIDIAN BACKGROUNDS ── */
  --color-bg:           #080808;    /* true obsidian base */
  --color-bg-2:         #0D0D0F;    /* slightly blue-tinted dark */
  --color-surface:      #131316;    /* card surface */
  --color-surface-2:    #1C1C21;    /* elevated surface */
  --color-surface-3:    #25252C;    /* highest elevation */

  /* ── PLASMA RED SPECTRUM ── */
  --color-plasma-900:   #1F0008;    /* deepest plasma shadow */
  --color-plasma-700:   #C4001A;    /* rich saturated red */
  --color-plasma-600:   #E5001F;    /* core plasma red */
  --color-plasma-500:   #FF1744;    /* electric scarlet — MAIN ACCENT */
  --color-plasma-400:   #FF4569;    /* bright hover */
  --color-plasma-300:   #FF748C;    /* muted highlight */
  --color-plasma-100:   #FFD6DC;    /* blush tint for text on red bg */

  --color-accent:       #FF1744;
  --color-accent-hover: #FF4569;
  --color-accent-dark:  #C4001A;
  --color-accent-glow:  rgba(255, 23, 68, 0.40);
  --color-accent-glow-sm: rgba(255, 23, 68, 0.18);
  --color-accent-subtle: rgba(255, 23, 68, 0.08);

  /* ── IVORY / WHITE SPECTRUM ── */
  --color-ivory:        #FAF8F5;    /* warm off-white — key differentiator */
  --color-ivory-2:      #F0EDE8;
  --color-white:        #FFFFFF;
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(250, 248, 245, 0.68);
  --color-text-muted:     rgba(250, 248, 245, 0.38);
  --color-text-disabled:  rgba(250, 248, 245, 0.20);
  --color-text-on-red:    #FFFFFF;  /* text on red backgrounds */

  /* ── BORDERS ── */
  --color-border:         rgba(250, 248, 245, 0.06);
  --color-border-2:       rgba(250, 248, 245, 0.12);
  --color-border-plasma:  rgba(255, 23, 68, 0.28);
  --color-border-active:  rgba(255, 23, 68, 0.70);

  /* ── GRADIENTS ── */
  --grad-plasma:        linear-gradient(135deg, #C4001A 0%, #FF1744 60%, #FF4569 100%);
  --grad-plasma-v:      linear-gradient(180deg, #FF1744 0%, #C4001A 100%);
  --grad-hero-overlay:  linear-gradient(135deg, rgba(8,8,8,0.94) 0%, rgba(31,0,8,0.80) 55%, rgba(8,8,8,0.70) 100%);
  --grad-card-overlay:  linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.97) 100%);
  --grad-diagonal:      linear-gradient(160deg, #FF1744 0%, #C4001A 100%);
  --grad-scanline:      repeating-linear-gradient(
                          0deg,
                          transparent,
                          transparent 2px,
                          rgba(255,23,68,0.03) 2px,
                          rgba(255,23,68,0.03) 4px
                        );
  --grad-noise:         url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");

  /* ── TYPOGRAPHY ── */
  --font-display:  'Bebas Neue', 'Impact', sans-serif;   /* ultra-condensed hero titles */
  --font-ui:       'Barlow Semi Condensed', sans-serif;  /* nav, labels, buttons */
  --font-body:     'Outfit', 'DM Sans', sans-serif;      /* body copy */
  --font-mono:     'Space Mono', monospace;              /* stats, numbers */

  /* ── TYPE SCALE ── */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.625rem;    /* 26px */
  --text-3xl:   2rem;        /* 32px */
  --text-4xl:   2.75rem;     /* 44px */
  --text-5xl:   4rem;        /* 64px */
  --text-6xl:   6rem;        /* 96px */
  --text-hero:  clamp(4rem, 10vw, 9rem); /* fluid hero title */

  /* ── SPACING ── */
  --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;

  /* ── SHAPE — Sharp with Chamfer ── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  /* Chamfered button: use clip-path instead of border-radius */
  --chamfer-btn: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  --chamfer-card: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));

  /* ── SHADOWS ── */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
  --shadow-card:    0 12px 40px rgba(0,0,0,0.7);
  --shadow-glow:    0 0 60px var(--color-accent-glow), 0 0 120px rgba(255,23,68,0.15);
  --shadow-glow-sm: 0 0 20px var(--color-accent-glow-sm);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-nav:     0 8px 32px rgba(0,0,0,0.9);

  /* ── Z-INDEX ── */
  --z-base:     1;
  --z-raised:   10;
  --z-overlay:  50;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    250;
  --z-telegram: 150;

  /* ── MOTION ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:    cubic-bezier(0.4, 0, 0.6, 1);
  --dur-instant:   80ms;
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      480ms;
  --dur-xslow:     700ms;
}