/* ===========================================================
   GAME AND GAMER — BRAND THEME
   Single source of truth for colours, type and spacing.
   Link this before any page stylesheet.
   =========================================================== */

:root{
  /* --- Brand core (sampled from the logo) --- */
  --gg-red:#E01F26;
  --gg-red-dark:#B3161C;
  --gg-red-soft:#FDECEC;
  --gg-navy:#0E4D70;
  --gg-navy-deep:#08304B;
  --gg-navy-ink:#052436;

  /* --- Semantic --- */
  --color-primary:var(--gg-red);
  --color-on-primary:#FFFFFF;
  --color-secondary:var(--gg-navy);
  --color-on-secondary:#FFFFFF;
  --color-accent:#FFB23F;              /* arcade ticket gold, used sparingly */

  --color-bg:#FFFFFF;
  --color-bg-alt:#F6F4F1;
  --color-bg-dark:var(--gg-navy-ink);
  --color-surface:#FFFFFF;

  --color-fg:#0C1A22;
  --color-fg-muted:#5A6B78;
  --color-fg-on-dark:#EAF2F7;
  --color-fg-on-dark-muted:#9FBACB;

  --color-border:#E4E1DC;
  --color-border-dark:rgba(255,255,255,.14);
  --color-ring:var(--gg-red);

  /* --- Type --- */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:clamp(1.6rem,2.4vw,2.25rem);
  --text-3xl:clamp(2rem,3.6vw,3rem);
  --text-4xl:clamp(2.6rem,6vw,4.75rem);

  /* --- Space (marketing rhythm: generous) --- */
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4rem;
  --space-7:6rem;

  /* --- Shape & depth --- */
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(8,48,75,.08);
  --shadow:0 12px 30px rgba(8,48,75,.12);
  --shadow-lg:0 28px 60px rgba(8,48,75,.22);

  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:240ms;
}

/* Reusable brand primitives -------------------------------- */
.gg-eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gg-red);
}
.gg-display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.03em;
}

.gg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:0 1.75rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:var(--text-base);font-weight:700;
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.gg-btn--primary{background:var(--gg-red);color:#fff;box-shadow:0 10px 24px rgba(224,31,38,.28)}
.gg-btn--primary:hover{background:var(--gg-red-dark);transform:translateY(-2px)}
.gg-btn--light{background:#fff;color:var(--gg-navy-deep)}
.gg-btn--light:hover{background:#F1F5F8;transform:translateY(-2px)}
.gg-btn--outline{border:2px solid currentColor;color:var(--gg-navy-deep)}
.gg-btn--outline:hover{background:var(--gg-navy-deep);color:#fff;transform:translateY(-2px)}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--color-ring);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}