/* ============================================================
   NEO PADEL HUB — Colors & Type Foundations
   Load this file anywhere you build with the brand.
   ============================================================ */

/* ---------- Fonts: Poppins (brand typeface) ---------- */
@font-face { font-family:"Poppins"; font-weight:300; font-style:normal; src:url("fonts/Poppins-Light.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; src:url("fonts/Poppins-Regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:500; font-style:normal; src:url("fonts/Poppins-Medium.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; src:url("fonts/Poppins-SemiBold.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:700; font-style:normal; src:url("fonts/Poppins-Bold.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:800; font-style:normal; src:url("fonts/Poppins-ExtraBold.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Poppins"; font-weight:900; font-style:normal; src:url("fonts/Poppins-Black.woff2") format("woff2"); font-display:swap; }

:root {
  /* ---------- BRAND CORE ---------- */
  --neo-orange:        #FD4D01;  /* primary — energy, CTAs, accents */
  --neo-orange-mid:    #FD7134;  /* hover / secondary fills */
  --neo-orange-light:  #FE9467;  /* tints, soft fills, on-dark accents */
  --neo-navy:          #000C47;  /* primary dark — text, headers, ink */
  --neo-royal:         #0F2594;  /* royal blue — court tone, secondary brand */
  --neo-periwinkle:    #9FA8D4;  /* soft blue — muted accents, disabled */
  --neo-white:         #FFFFFF;

  /* ---------- EXTENDED NEUTRALS (derived, for UI scaffolding) ---------- */
  --neo-ink:           #000C47;  /* = navy */
  --neo-ink-700:       #1B2452;
  --neo-slate:         #5A6079;  /* secondary text on light */
  --neo-mist:          #EEF0F7;  /* light panel / card fill */
  --neo-line:          #DfE2EC;  /* hairline borders */
  --neo-cloud:         #F7F8FB;  /* page background, off-white */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:                var(--neo-cloud);
  --surface:           var(--neo-white);
  --surface-alt:       var(--neo-mist);
  --fg1:               var(--neo-navy);     /* primary text */
  --fg2:               var(--neo-slate);    /* secondary text */
  --fg-on-dark:        var(--neo-white);
  --fg-on-orange:      var(--neo-navy);     /* navy reads best on orange */
  --accent:            var(--neo-orange);
  --accent-hover:      #E84400;             /* orange pressed/darker */
  --link:              var(--neo-orange);
  --border:            var(--neo-line);
  --focus-ring:        var(--neo-royal);

  --success:           #1E9E6A;
  --warning:           #FD7134;
  --danger:            #E5342B;

  /* ---------- TYPE SCALE (Poppins everywhere) ---------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  /* ---------- RADII ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(0,12,71,.06), 0 1px 3px rgba(0,12,71,.08);
  --shadow-md: 0 6px 16px rgba(0,12,71,.10);
  --shadow-lg: 0 18px 44px rgba(0,12,71,.16);
  --shadow-orange: 0 10px 28px rgba(253,77,1,.34);

  /* ---------- SPACING (4px base) ---------- */
  --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;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Headings are Poppins ExtraBold/Black, UPPERCASE for display,
   with positive tracking — straight from the brand guideline pages.
   ============================================================ */
.neo-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--neo-orange);
}
.neo-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg1);
}
h1, .neo-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--fg1);
}
h2, .neo-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.08;
  color: var(--fg1);
}
h3, .neo-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--fg1);
}
.neo-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg2);
}
p, .neo-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg1);
}
.neo-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg2);
}
.neo-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg2);
}