/* ============================================================
   is7 game — "Crimson Pulse" Design Tokens
   Red (#E10600) + White (#FFFFFF) + Deep Black (#0B0B0D)
   ============================================================ */

:root {
  /* ---- Core brand ---- */
  --color-bg:            #0B0B0D;   /* near-black base */
  --color-bg-alt:        #151417;   /* elevated panels */
  --color-surface:       #1C1B1F;   /* cards */
  --color-surface-2:     #232227;   /* raised cards */
  --color-white:         #FFFFFF;
  --color-off-white:     #F5F3F4;

  /* ---- Red system ---- */
  --color-red-primary:   #E10600;   /* core brand red */
  --color-red-deep:      #9C0000;   /* shadows/gradients */
  --color-red-bright:    #FF2A1F;   /* hover/glow accents */
  --color-red-glow:      rgba(225, 6, 0, 0.45);
  --color-red-soft:      rgba(225, 6, 0, 0.10);

  /* ---- Text ---- */
  --color-text-primary:  #FFFFFF;
  --color-text-muted:    #C9C6C9;
  --color-text-dim:      #8E8B90;
  --color-text-on-white: #17161A;
  --color-text-on-red:   #FFFFFF;

  /* ---- Borders / lines ---- */
  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.16);
  --color-border-red:    rgba(225,6,0,0.35);

  /* ---- Accents ---- */
  --color-gold:          #FFC933;
  --color-telegram:      #229ED9;
  --color-success:       #2ECC71;

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(135deg, #0B0B0D 0%, #2A0505 55%, #E10600 140%);
  --gradient-card-hover: linear-gradient(160deg, rgba(225,6,0,0.15), transparent 60%);
  --gradient-cta: linear-gradient(90deg, #E10600 0%, #FF2A1F 100%);
  --gradient-red-fade: linear-gradient(180deg, rgba(225,6,0,0.12), transparent);
  --gradient-panel: linear-gradient(160deg, #1C1B1F 0%, #151417 100%);
  --gradient-text: linear-gradient(92deg, #FFFFFF 0%, #FF9B96 60%, #E10600 100%);

  /* ---- Typography ---- */
  --font-display: 'Clash Display', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --fs-hero:   clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h1:     clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:     clamp(1.6rem, 2.5vw + 0.5rem, 2.6rem);
  --fs-h3:     clamp(1.25rem, 1.5vw + 0.5rem, 1.7rem);
  --fs-h4:     clamp(1.1rem, 1vw + 0.4rem, 1.3rem);
  --fs-body:   clamp(1rem, 0.4vw + 0.9rem, 1.075rem);
  --fs-lead:   clamp(1.075rem, 0.8vw + 0.95rem, 1.3rem);
  --fs-small:  0.875rem;
  --fs-xs:     0.78rem;

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

  /* ---- Radius ---- */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---- Shadow / glow ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow-red: 0 0 32px var(--color-red-glow);
  --shadow-glow-soft: 0 0 20px rgba(225,6,0,0.25);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 880px;
  --header-h: 74px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.35s;
  --dur-slow: 0.6s;

  /* ---- Z-index ---- */
  --z-nav: 100; --z-modal: 200; --z-toast: 300; --z-fab: 90; --z-drawer: 150;
}