/* ============================================================================
   ARCOVEX — Core Color + Type Tokens
   A commercial game studio. Dark, cinematic, premium — with sharp angular
   esports energy and vibrant electric color pops.
   ----------------------------------------------------------------------------
   Fonts are loaded from CDN below. If you ship offline, drop the .woff2 files
   into /fonts and swap the @font-face src. See README "Visual Foundations".
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand font families ------------------------------------------------ */
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-sans:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-arabic:  'IBM Plex Sans Arabic', 'Satoshi', sans-serif;

  /* ===========================================================================
     COLOR — BASE TOKENS
     =========================================================================== */

  /* Void — the dark substrate. Everything lives on black. */
  --void:        #08090D;   /* page base — near-black, faint cool cast */
  --ink:         #0F1116;   /* raised surface / nav */
  --slate:       #16181F;   /* cards, panels */
  --slate-2:     #1E212A;   /* hover surface, inputs */
  --steel:       #2A2E39;   /* borders on solid surfaces */

  /* Hairlines (use over imagery / glass) */
  --line:        rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);
  --line-faint:  rgba(255,255,255,0.05);

  /* Plasma — the hero accent. Electric lime. CTAs, the mark, highlights. */
  --plasma:      #C2FF3D;
  --plasma-bright:#D6FF6B;
  --plasma-deep: #9BD400;   /* pressed / text on plasma is --void */
  --plasma-glow: rgba(194,255,61,0.35);

  /* Ember — secondary energy accent. Hot coral. Warmth, play, alt CTA. */
  --ember:       #FF5230;
  --ember-bright:#FF7A5C;
  --ember-deep:  #D63310;
  --ember-glow:  rgba(255,82,48,0.30);

  /* Signal — tertiary utility accent. Electric cyan. Links, info, meta. */
  --signal:      #36E0FF;
  --signal-deep: #00A6CC;

  /* Paper — warm off-white for inverted / editorial sections. */
  --paper:       #F2EFE6;
  --paper-2:     #E7E2D4;
  --paper-line:  rgba(20,21,15,0.12);

  /* ===========================================================================
     COLOR — SEMANTIC FOREGROUNDS (on Void)
     =========================================================================== */
  --fg-1: #F5F6F4;   /* primary text / headlines */
  --fg-2: #AEB1BC;   /* secondary text, body on dark */
  --fg-3: #6E717E;   /* muted, captions, meta */
  --fg-4: #45474F;   /* faint, disabled, dividers-as-text */

  /* Foregrounds on Paper (inverted sections) */
  --ink-1: #14150F;
  --ink-2: #46473C;
  --ink-3: #84857A;

  /* ===========================================================================
     ELEVATION / SHADOW / RADIUS / SPACING
     =========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows are deep + tinted toward void, not gray. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.7);
  --shadow-plasma: 0 0 0 1px var(--plasma-glow), 0 12px 40px -8px var(--plasma-glow);
  --shadow-ember:  0 0 0 1px var(--ember-glow), 0 12px 40px -8px var(--ember-glow);

  /* 4px base spacing ramp */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;

  /* Motion — confident, snappy, never bouncy-cute. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */ /* default exit/enter */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 280ms;      /* @kind other */
  --dur-slow: 600ms; /* @kind other */

  /* ===========================================================================
     TYPE SCALE  (fluid, clamps to viewport)
     =========================================================================== */
  --t-display:  clamp(3.5rem, 9vw, 8.5rem);   /* @kind font */ /* hero — Clash, tight */
  --t-h1:       clamp(2.5rem, 5.5vw, 5rem);   /* @kind font */
  --t-h2:       clamp(2rem, 3.6vw, 3.25rem);  /* @kind font */
  --t-h3:       clamp(1.5rem, 2.2vw, 2rem);   /* @kind font */
  --t-h4:       1.375rem;
  --t-lead:     clamp(1.125rem, 1.5vw, 1.5rem);  /* @kind font */ /* intro paragraphs */
  --t-body:     1.0625rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.8125rem;
  --t-eyebrow:  0.75rem;     /* mono, tracked-out labels */
}

/* ===========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   =========================================================================== */

.display, .a-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .a-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .a-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .a-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h4, .a-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.lead, .a-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

p, .a-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.eyebrow, .a-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plasma);
}

.meta, .a-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

code, .a-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--signal);
  background: rgba(54,224,255,0.08);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

/* Arabic text helper — apply on [dir="rtl"] or .ar elements */
.ar, [lang="ar"], [dir="rtl"] {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
[dir="rtl"] .eyebrow, [lang="ar"].eyebrow { letter-spacing: 0.05em; }

/* Accent text utilities */
.t-plasma { color: var(--plasma); }
.t-ember  { color: var(--ember); }
.t-signal { color: var(--signal); }
.t-fg2    { color: var(--fg-2); }
.t-fg3    { color: var(--fg-3); }

/* Outlined / stroked display text (esports motif) */
.t-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg-1);
}
.t-outline-plasma {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--plasma);
}