/* ============================================================
   Academy of eSports — Design tokens (resolved theme)
   Accent: Neon Aqua #2ABEEF · Mood: Near-Black · Impact: Standard
   These values mirror the design system + the runtime theme that
   the source component computed, baked in so no JS is required.
   ============================================================ */

:root {
  /* ---- Brand accent + aqua tints ---- */
  --aoe-aqua: #2ABEEF;
  --color-accent: #2ABEEF;
  --aoe-aqua-12: rgba(42, 190, 239, 0.12);
  --aoe-aqua-20: rgba(42, 190, 239, 0.20);
  --aoe-aqua-40: rgba(42, 190, 239, 0.40);
  --aoe-aqua-60: rgba(42, 190, 239, 0.60);

  /* ---- Secondary / semantic hues ---- */
  --aoe-green: #2AEFAA;
  --aoe-gold:  #FFC71A;
  --aoe-teal:  #00759C;
  --aoe-red:   #F93F3F;
  --aoe-white: #FFFFFF;

  /* ---- Surfaces (Near-Black mood) ---- */
  --aoe-bg:        #000009;
  --color-bg:      #000009;
  --aoe-surface-1: #07070F;
  --aoe-surface-2: #0E0E18;
  --aoe-surface-3: #16161F;
  --aoe-surface-4: #1E1E27;
  --aoe-hairline:  #26262D;
  --aoe-anthracite:#26262D;
  --aoe-stroke:    #65656B;

  /* ---- Semantic aliases ---- */
  --color-surface:        var(--aoe-surface-2);
  --color-surface-raised: var(--aoe-surface-3);
  --color-card:           var(--aoe-surface-2);
  --color-border:         #65656B;
  --color-border-subtle:  #26262D;
  --color-text:           #FFFFFF;
  --color-text-muted:     #9999A6;
  --color-text-faint:     #65656B;
  --color-on-accent:      #08131A;   /* dark ink that sits on aqua fills */
  --color-success: var(--aoe-green);
  --color-warning: var(--aoe-gold);
  --color-danger:  var(--aoe-red);

  /* ---- Gradients / glows ---- */
  --aoe-gradient-neon:  linear-gradient(180deg, #2ABEEF 0%, #00759C 100%);
  --aoe-gradient-black: linear-gradient(180deg, #3B3B43 0%, #000009 100%);
  --aoe-gradient-button: linear-gradient(180deg, rgb(68,216,255) 0%, #2ABEEF 52%, rgb(16,164,213) 100%);
  --aoe-glow-radial: radial-gradient(115% 80% at 50% -12%, rgba(42,190,239,0.26) 0%, rgba(42,190,239,0.09) 36%, rgba(0,0,9,0) 66%),
                     radial-gradient(60% 90% at 100% 104%, rgba(255,199,26,0.44) 0%, rgba(255,183,26,0.16) 34%, rgba(0,0,9,0) 68%);

  /* ---- Typography ---- */
  --font-display: 'Blinker', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card:   0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,9,0.55);
  --shadow-raised: 0 18px 48px rgba(0,0,9,0.65);
  --shadow-pop:    0 24px 64px rgba(0,0,9,0.75);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --focus-ring: 0 0 0 3px rgba(42,190,239,0.40);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --gutter: 24px;

  /* ---- Responsive grid columns (desktop defaults; overridden in media query) ---- */
  --hero-cols: 1.05fr .95fr;
  --job-cols: 1fr 1fr;
  --about-split-cols: 1.05fr .95fr;
  --about-photo-h: 420px;
  --expect-cols: repeat(3, 1fr);
  --apply-grid-cols: 1fr 1fr;
  --job-detail-cols: 1.1fr .9fr;
  --full-span: span 2;
  --step-label-display: inline;
}

/* Headline impact: Standard */
h1, h2 { font-weight: 800; letter-spacing: -.02em; }
h1 { line-height: 1.1; }

/* ---- Mobile overrides (< 900px, matching the source breakpoint) ---- */
@media (max-width: 899px) {
  :root {
    --hero-cols: 1fr;
    --job-cols: 1fr;
    --about-split-cols: 1fr;
    --about-photo-h: 280px;
    --expect-cols: 1fr;
    --apply-grid-cols: minmax(0, 1fr);
    --job-detail-cols: 1fr;
    --full-span: span 1;
    --step-label-display: none;
  }
}