/* ============================================================
   FutureXP — Colors & Type foundations
   Import this file, or copy the :root block into your own.
   Fonts load from Google Fonts (see @import below).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND ---------- */
  /* The official logo mark gradient: cyan-blue → purple → magenta */
  --brand-blue:      #29abe2;
  --brand-purple:    #a846f3;
  --brand-magenta:   #cd28f8;
  --brand-gradient:  linear-gradient(150deg, #29abe2 0%, #7b6cf6 45%, #cd28f8 100%);
  --brand-gradient-soft: linear-gradient(150deg, #e6f6fd 0%, #f3edfe 50%, #fdeafe 100%);

  /* ---------- PRODUCT PALETTE (gamified) ---------- */
  /* Primary brand-product color = violet. Each color ships with a
     darker "shadow" tone used for the signature hard drop-shadow. */
  --violet:        #6c63ff;
  --violet-dk:     #4b43d4;
  --violet-shadow: #3a32a8;

  --coral:         #ff4d6d;
  --coral-shadow:  #c93757;

  --amber:         #ff8a3d;
  --amber-shadow:  #d36420;

  --gold:          #ffc24d;
  --gold-shadow:   #c98e26;

  --xp:            #58cc02;   /* progress / success / XP green */
  --xp-shadow:     #45a002;
  --xp-soft:       #e3fbcf;

  --sky:           #1cb0f6;
  --sky-shadow:    #1397d3;

  /* ---------- SURFACES / INK ---------- */
  --paper:    #ffffff;   /* cards, top surface */
  --paper-2:  #f7f5f0;   /* page background (warm paper) */
  --paper-3:  #efebe0;   /* sunken / muted fill */
  --ink:      #1d1a3a;   /* primary text + dark sections */
  --ink-soft: #4a4670;   /* body text */
  --mute:     #8b87a8;   /* captions, meta, labels */
  --rule:     #e7e3d6;   /* borders, hairlines, default hard-shadow */

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper-2);
  --fg1:          var(--ink);       /* headings */
  --fg2:          var(--ink-soft);  /* body */
  --fg3:          var(--mute);      /* meta */
  --accent:       var(--violet);
  --success:      var(--xp);
  --danger:       var(--coral);
  --warning:      var(--amber);
  --info:         var(--sky);
  --border:       var(--rule);
  --selection-bg: var(--xp);
  --selection-fg: #ffffff;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* headings, UI, buttons */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;           /* paragraphs, long copy */
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;                    /* code, durations, badges */

  /* ---------- RADII ---------- */
  --r-xs:   6px;    /* eyebrows, tags, small chips */
  --r-sm:   10px;   /* inputs, icon tiles */
  --r-md:   14px;   /* buttons, stat cards */
  --r-lg:   16px;   /* cards, tiles */
  --r-xl:   20px;   /* feature panels, callouts */
  --r-2xl:  22px;   /* hero cards */
  --r-pill: 999px;  /* badges, pills, league chips */

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-22: 88px;  /* section padding */

  /* ---------- HARD SHADOWS (signature "stacked" depth) ---------- */
  /* No blur. A solid offset slab in the element's shadow tone.
     Pair every colored surface with its matching *-shadow var. */
  --hard-1: 0 3px 0;   /* small chips / eyebrows */
  --hard-2: 0 4px 0;   /* stat cards, inputs, icon tiles */
  --hard-3: 0 5px 0;   /* buttons, default cards */
  --hard-4: 0 6px 0;   /* feature cards, pillars */
  --hard-5: 0 8px 0;   /* hero / callout panels */
  /* usage: box-shadow: var(--hard-3) var(--violet-shadow); */

  /* ---------- SOFT SHADOWS (rare — overlays / menus only) ---------- */
  --soft-sm: 0 4px 14px rgba(29,26,58,0.10);
  --soft-md: 0 12px 32px rgba(29,26,58,0.16);

  /* ---------- MOTION ---------- */
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy, gamified */
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-press: 0.08s;   /* button depress */
  --dur-fast:  0.15s;   /* hovers */
  --dur-med:   0.25s;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ============================================================
   SEMANTIC TYPE SCALE
   Display sizes use clamp() so heroes shrink gracefully.
   ============================================================ */

.fxp-display {            /* hero H1 */
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 8vw, 84px); line-height: 1;
  letter-spacing: -0.03em; color: var(--fg1);
}
.fxp-h1 {                 /* section H2 */
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--fg1);
}
.fxp-h2 {                 /* sub-section */
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--fg1);
}
.fxp-h3 {                 /* card title */
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; line-height: 1.3; color: var(--fg1);
}
.fxp-eyebrow {            /* uppercase kicker */
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
}
.fxp-deck {               /* lead paragraph under a heading */
  font-family: var(--font-body); font-weight: 400;
  font-size: 20px; line-height: 1.5; color: var(--fg2);
}
.fxp-body {               /* default paragraph */
  font-family: var(--font-body); font-weight: 400;
  font-size: 17px; line-height: 1.55; color: var(--fg2);
}
.fxp-small {              /* captions / fine print */
  font-family: var(--font-body); font-weight: 400;
  font-size: 13px; line-height: 1.45; color: var(--fg3);
}
.fxp-label {              /* UI labels, stat captions */
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mute);
}
.fxp-mono {               /* durations, codes, counts */
  font-family: var(--font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.02em; color: var(--fg2);
}

/* Display underline highlight (marker-pen style) */
.fxp-underline {
  background-image: linear-gradient(transparent 70%, var(--xp) 70%);
  background-repeat: no-repeat; background-size: 100% 100%;
  padding: 0 4px;
}
.fxp-underline.gold { background-image: linear-gradient(transparent 70%, var(--gold) 70%); }
.fxp-underline.coral { background-image: linear-gradient(transparent 70%, var(--coral) 70%); }