/* ============================================================
   HRMP — Design Tokens
   Direction: «Void Dimension» — глубокий космос Энда + лавовые
   всполохи Незера + холодный свет кристаллов. Тёмно-фиолетовый
   доминирует; пурпур/cyan как акцент; лавовый оранжевый для CTA.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Bebas+Neue&family=VT323&family=Share+Tech+Mono&display=swap');

:root {

  /* ── PALETTE: Void / End ── */
  --void-950:  #04040C;
  --void-900:  #080C1A;
  --void-800:  #0D1028;
  --void-700:  #131630;
  --void-600:  #1A1D3E;

  /* ── PALETTE: End Crystal — доминирующий акцент ── */
  --crystal-50:   #F0F4FF;
  --crystal-100:  #DDE5FF;
  --crystal-200:  #B8CAFF;
  --crystal-300:  #8FABFF;
  --crystal-400:  #6B8DFF;
  --crystal-500:  #4D6EF5;
  --crystal-600:  #3A54D4;
  --crystal-700:  #2D3EA8;
  --crystal-800:  #1F2B78;
  --crystal-900:  #141C50;

  /* ── PALETTE: Ender Magenta — secondary ── */
  --ender-50:  #FDF0FF;
  --ender-100: #F7D6FF;
  --ender-200: #EEA8FF;
  --ender-300: #E070FF;
  --ender-400: #CC44F7;
  --ender-500: #AB24D9;
  --ender-600: #8B18B0;
  --ender-700: #6B1087;
  --ender-800: #4A0A60;
  --ender-900: #2E0440;

  /* ── PALETTE: Lava — CTA / danger ── */
  --lava-50:  #FFF5E8;
  --lava-100: #FFE4C0;
  --lava-200: #FFCA84;
  --lava-300: #FFA840;
  --lava-400: #FF8C14;
  --lava-500: #F06C00;
  --lava-600: #C45200;
  --lava-700: #963C00;
  --lava-800: #6B2900;
  --lava-900: #3F1600;

  /* ── PALETTE: Diamond Cyan — highlight ── */
  --cyan-50:  #E8FEFF;
  --cyan-100: #BAFBFF;
  --cyan-200: #7EF5FC;
  --cyan-300: #3DEDF5;
  --cyan-400: #0FE0EC;
  --cyan-500: #00CEDD;
  --cyan-600: #00A4B0;
  --cyan-700: #007A84;
  --cyan-800: #005259;
  --cyan-900: #002D32;

  /* ── PALETTE: Grass / Overworld ── */
  --grass-400: #74C442;
  --grass-500: #5DA43A;
  --grass-600: #3D7A21;
  --grass-700: #235200;

  /* ── PALETTE: Gold ── */
  --gold-300: #FFE066;
  --gold-400: #FCBA03;
  --gold-500: #D4960A;
  --gold-600: #A06D00;

  /* ── NEUTRAL / STONE ── */
  --stone-50:  #F4F4F8;
  --stone-100: #E2E2EC;
  --stone-200: #C4C4D4;
  --stone-300: #9898AC;
  --stone-400: #707088;
  --stone-500: #505068;
  --stone-600: #363650;
  --stone-700: #242440;
  --stone-800: #16162E;
  --stone-900: #0C0C1E;

  /* ── SEMANTIC ── */
  --color-success:  #4ADE80;
  --color-warning:  #FBBD23;
  --color-error:    #F87171;
  --color-info:     var(--cyan-400);

  /* ── SURFACE TOKENS ── */
  --surface-base:    var(--void-900);
  --surface-raised:  var(--void-800);
  --surface-overlay: var(--void-700);
  --surface-inset:   var(--void-950);
  --surface-card:    rgba(19, 22, 48, 0.85);
  --surface-glass:   rgba(77, 110, 245, 0.06);

  /* ── TEXT TOKENS ── */
  --text-primary:   #E8E8F4;
  --text-secondary: var(--stone-300);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--void-900);
  --text-accent:    var(--crystal-300);
  --text-glow:      var(--ender-300);

  /* ── BRAND PRIMARY ── */
  --color-primary:       var(--crystal-500);
  --color-primary-hover: var(--crystal-400);
  --color-primary-muted: rgba(77, 110, 245, 0.15);

  --color-secondary:       var(--ender-500);
  --color-secondary-hover: var(--ender-400);
  --color-secondary-muted: rgba(171, 36, 217, 0.15);

  --color-cta:       var(--lava-400);
  --color-cta-hover: var(--lava-300);
  --color-cta-dark:  var(--lava-700);

  --color-highlight: var(--cyan-300);

  /* ── TYPOGRAPHY ── */

  /* Display font: Bebas Neue — высокий контраст, кинематографично */
  --font-display:  'Bebas Neue', 'Impact', sans-serif;

  /* Pixel / retro — Press Start 2P для лейблов и акцентов */
  --font-pixel:    'Press Start 2P', monospace;

  /* Тело — Share Tech Mono: моноширинный, sci-fi, хорошо читается */
  --font-body:     'Share Tech Mono', 'VT323', monospace;

  /* Fallback mono */
  --font-mono:     'Share Tech Mono', 'Courier New', monospace;

  /* ── TYPE SCALE ── */
  --text-xs:   0.625rem;   /* 10px — pixel labels */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.5rem;     /* 56px */
  --text-6xl:  5rem;       /* 80px */
  --text-7xl:  7rem;       /* 112px — hero display */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.3em;

  /* ── SPACING (4px grid) ── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* ── BORDER RADIUS ── */
  /* Minecraft = квадратный мир — минимальные радиусы */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;   /* максимум для карточек */
  --radius-lg:   4px;
  --radius-xl:   4px;
  --radius-full: 0;     /* кнопки — без скругления */

  /* ── BORDERS ── */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;   /* pixel-style border */

  --border-color-subtle:  rgba(77, 110, 245, 0.12);
  --border-color-default: rgba(77, 110, 245, 0.25);
  --border-color-strong:  var(--crystal-600);
  --border-color-accent:  var(--ender-500);
  --border-color-cta:     var(--lava-400);

  /* ── SHADOWS ── */
  --shadow-sm:
    0 1px 2px rgba(4, 4, 12, 0.8);

  --shadow-md:
    0 4px 8px rgba(4, 4, 12, 0.9),
    0 2px 4px rgba(4, 4, 12, 0.6);

  --shadow-lg:
    0 8px 24px rgba(4, 4, 12, 0.95),
    0 4px 8px rgba(4, 4, 12, 0.7);

  --shadow-xl:
    0 16px 48px rgba(4, 4, 12, 1),
    0 8px 16px rgba(4, 4, 12, 0.8);

  /* ── GLOW EFFECTS (block lighting) ── */
  --glow-crystal:
    0 0 8px rgba(77, 110, 245, 0.6),
    0 0 24px rgba(77, 110, 245, 0.3),
    0 0 48px rgba(77, 110, 245, 0.12);

  --glow-crystal-intense:
    0 0 4px rgba(107, 141, 255, 0.9),
    0 0 16px rgba(77, 110, 245, 0.7),
    0 0 40px rgba(77, 110, 245, 0.4),
    0 0 80px rgba(77, 110, 245, 0.15);

  --glow-ender:
    0 0 8px rgba(204, 68, 247, 0.6),
    0 0 24px rgba(171, 36, 217, 0.3),
    0 0 60px rgba(139, 24, 176, 0.15);

  --glow-ender-intense:
    0 0 4px rgba(224, 112, 255, 0.9),
    0 0 16px rgba(204, 68, 247, 0.7),
    0 0 48px rgba(171, 36, 217, 0.35),
    0 0 100px rgba(107, 16, 135, 0.18);

  --glow-lava:
    0 0 8px rgba(255, 140, 20, 0.7),
    0 0 24px rgba(240, 108, 0, 0.4),
    0 0 56px rgba(196, 82, 0, 0.2);

  --glow-lava-intense:
    0 0 4px rgba(255, 168, 64, 1),
    0 0 16px rgba(255, 140, 20, 0.8),
    0 0 40px rgba(240, 108, 0, 0.5),
    0 0 80px rgba(150, 60, 0, 0.25);

  --glow-cyan:
    0 0 8px rgba(61, 237, 245, 0.5),
    0 0 24px rgba(0, 206, 221, 0.25);

  --glow-grass:
    0 0 8px rgba(93, 164, 58, 0.5),
    0 0 24px rgba(61, 122, 33, 0.25);

  /* Pixel border shadow (Minecraft UI style) */
  --pixel-border-dark:
    0 -4px 0 0 #000,
    0  4px 0 0 #000,
    -4px 0 0 0 #000,
     4px 0 0 0 #000;

  --pixel-border-crystal:
    0 -4px 0 0 var(--crystal-800),
    0  4px 0 0 var(--crystal-800),
    -4px 0 0 0 var(--crystal-800),
     4px 0 0 0 var(--crystal-800);

  --pixel-border-ender:
    0 -4px 0 0 var(--ender-800),
    0  4px 0 0 var(--ender-800),
    -4px 0 0 0 var(--ender-800),
     4px 0 0 0 var(--ender-800);

  --pixel-border-lava:
    0 -4px 0 0 var(--lava-700),
    0  4px 0 0 var(--lava-700),
    -4px 0 0 0 var(--lava-700),
     4px 0 0 0 var(--lava-700);

  /* ── ANIMATION TOKENS ── */

  /* Blocky, step-like — без плавных кривых */
  --ease-block:    steps(4, end);
  --ease-chunk:    steps(8, end);
  --ease-pixel:    steps(1, end);

  /* Satisfying weighted motion */
  --ease-out-hard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-hard:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-crawl:   600ms;
  --dur-scene:   1000ms;

  /* ── GRADIENTS ── */

  /* Hero background — Void/End atmosphere */
  --gradient-void:
    radial-gradient(ellipse 120% 80% at 50% -10%,
      rgba(77, 110, 245, 0.18) 0%,
      rgba(171, 36, 217, 0.08) 40%,
      transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 20%,
      rgba(204, 68, 247, 0.12) 0%,
      transparent 60%),
    linear-gradient(180deg,
      var(--void-800) 0%,
      var(--void-900) 50%,
      var(--void-950) 100%);

  /* Nether section — lava underlighting */
  --gradient-nether:
    radial-gradient(ellipse 100% 60% at 50% 100%,
      rgba(240, 108, 0, 0.22) 0%,
      rgba(196, 82, 0, 0.08) 50%,
      transparent 80%),
    linear-gradient(180deg,
      var(--void-950) 0%,
      rgba(10, 5, 0, 1) 100%);

  /* Crystal/End section */
  --gradient-end:
    radial-gradient(ellipse 80% 50% at 50% 50%,
      rgba(77, 110, 245, 0.12) 0%,
      rgba(171, 36, 217, 0.06) 60%,
      transparent 100%),
    var(--void-900);

  /* Overworld sky — section divider */
  --gradient-overworld:
    linear-gradient(180deg,
      rgba(13, 16, 40, 1) 0%,
      rgba(26, 22, 62, 0.8) 50%,
      rgba(13, 16, 40, 1) 100%);

  /* Card shimmer — hover gradient */
  --gradient-card-hover:
    linear-gradient(135deg,
      rgba(77, 110, 245, 0.1) 0%,
      rgba(171, 36, 217, 0.06) 50%,
      rgba(61, 237, 245, 0.04) 100%);

  /* CTA button — lava glow gradient */
  --gradient-cta:
    linear-gradient(135deg,
      var(--lava-400) 0%,
      var(--lava-300) 50%,
      var(--lava-400) 100%);

  --gradient-cta-hover:
    linear-gradient(135deg,
      var(--lava-300) 0%,
      #FFB84D 50%,
      var(--lava-300) 100%);

  /* Primary button gradient */
  --gradient-btn-primary:
    linear-gradient(180deg,
      var(--crystal-400) 0%,
      var(--crystal-600) 100%);

  /* Text gradient — hero title */
  --gradient-text-hero:
    linear-gradient(135deg,
      #FFFFFF 0%,
      var(--crystal-200) 30%,
      var(--ender-300) 60%,
      var(--lava-300) 100%);

  --gradient-text-accent:
    linear-gradient(90deg,
      var(--crystal-300) 0%,
      var(--ender-300) 100%);

  /* Scan line overlay */
  --gradient-scanlines:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.08) 4px
    );

  /* Grid overlay — Minecraft block grid */
  --gradient-grid:
    repeating-linear-gradient(
      0deg, transparent, transparent 31px,
      rgba(77, 110, 245, 0.04) 31px,
      rgba(77, 110, 245, 0.04) 32px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 31px,
      rgba(77, 110, 245, 0.04) 31px,
      rgba(77, 110, 245, 0.04) 32px
    );

  /* ── COMPONENT TOKENS ── */

  /* Button — Primary */
  --btn-primary-bg:         var(--crystal-500);
  --btn-primary-bg-hover:   var(--crystal-400);
  --btn-primary-border:     var(--crystal-700);
  --btn-primary-text:       #FFFFFF;
  --btn-primary-shadow:     var(--glow-crystal);
  --btn-primary-shadow-hover: var(--glow-crystal-intense);
  --btn-primary-radius:     var(--radius-none);
  --btn-primary-font:       var(--font-pixel);

  /* Button — CTA (Lava) */
  --btn-cta-bg:           var(--lava-400);
  --btn-cta-bg-hover:     var(--lava-300);
  --btn-cta-border:       var(--lava-700);
  --btn-cta-text:         var(--void-900);
  --btn-cta-shadow:       var(--glow-lava);
  --btn-cta-shadow-hover: var(--glow-lava-intense);

  /* Button — Ghost */
  --btn-ghost-bg:         transparent;
  --btn-ghost-bg-hover:   var(--surface-glass);
  --btn-ghost-border:     var(--border-color-default);
  --btn-ghost-border-hover: var(--crystal-400);
  --btn-ghost-text:       var(--text-secondary);
  --btn-ghost-text-hover: var(--text-accent);

  /* Card */
  --card-bg:          var(--surface-card);
  --card-bg-hover:    rgba(19, 22, 48, 0.95);
  --card-border:      var(--border-color-subtle);
  --card-border-hover: var(--border-color-default);
  --card-radius:      var(--radius-none);
  --card-shadow:      var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-padding-x:   var(--space-6);
  --card-padding-y:   var(--space-5);

  /* Card variants */
  --card-crystal-border:   var(--crystal-700);
  --card-crystal-bg-hover: rgba(77, 110, 245, 0.08);
  --card-ender-border:     var(--ender-700);
  --card-ender-bg-hover:   rgba(171, 36, 217, 0.08);
  --card-lava-border:      var(--lava-700);
  --card-lava-bg-hover:    rgba(240, 108, 0, 0.08);
  --card-cyan-border:      var(--cyan-700);
  --card-cyan-bg-hover:    rgba(0, 206, 221, 0.06);

  /* Input */
  --input-bg:           rgba(4, 4, 12, 0.8);
  --input-bg-focus:     rgba(8, 12, 26, 0.95);
  --input-border:       var(--border-color-default);
  --input-border-focus: var(--crystal-400);
  --input-border-error: var(--color-error);
  --input-text:         var(--text-primary);
  --input-placeholder:  var(--stone-500);
  --input-radius:       var(--radius-none);
  --input-shadow-focus: var(--glow-crystal);
  --input-font:         var(--font-body);
  --input-padding-x:    var(--space-4);
  --input-padding-y:    var(--space-3);

  /* Badge / Chip */
  --badge-radius:       var(--radius-none);
  --badge-font:         var(--font-pixel);
  --badge-font-size:    var(--text-xs);
  --badge-padding-x:    var(--space-3);
  --badge-padding-y:    var(--space-1);

  --badge-crystal-bg:    rgba(77, 110, 245, 0.15);
  --badge-crystal-border: var(--crystal-600);
  --badge-crystal-text:  var(--crystal-300);

  --badge-ender-bg:    rgba(171, 36, 217, 0.15);
  --badge-ender-border: var(--ender-600);
  --badge-ender-text:  var(--ender-300);

  --badge-lava-bg:    rgba(240, 108, 0, 0.15);
  --badge-lava-border: var(--lava-600);
  --badge-lava-text:  var(--lava-300);

  --badge-grass-bg:    rgba(93, 164, 58, 0.15);
  --badge-grass-border: var(--grass-600);
  --badge-grass-text:  var(--grass-400);

  /* Nav */
  --nav-height:    64px;
  --nav-bg:        rgba(4, 4, 12, 0.92);
  --nav-border:    var(--crystal-800);
  --nav-blur:      blur(16px);
  --nav-logo-font: var(--font-pixel);
  --nav-link-font: var(--font-pixel);

  /* Section */
  --section-padding-y: var(--space-24);
  --section-padding-x: var(--space-4);
  --container-max:     1200px;
  --container-narrow:  900px;

  /* Divider */
  --divider-color: rgba(77, 110, 245, 0.15);
  --divider-glow:
    0 0 8px rgba(77, 110, 245, 0.3),
    0 0 24px rgba(77, 110, 245, 0.1);

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* Icon sizes */
  --icon-xs:  12px;
  --icon-sm:  16px;
  --icon-md:  24px;
  --icon-lg:  32px;
  --icon-xl:  48px;
  --icon-2xl: 64px;

}

/* ── DARK MODE (already dark-first, override if needed) ── */
@media (prefers-color-scheme: light) {
  :root {
    --surface-base:    #0D1028;
    --surface-raised:  #131630;
    --text-primary:    #E8E8F4;
    --text-secondary:  #9898AC;
  }
}