/* ============================================================
   SPACE TURTLES — Colors & Type
   Pulled from the mascot logo + STRP EU/NA stickers + SABS sub-brand.
   Dark-first: we are a gaming community and every surface assumes a
   deep-space background with bright cyan accents.
   ============================================================ */

/* -----  FONTS  --------------------------------------------- */
/* Display family — Bebas Neue clone of the heavy condensed sans in the
   STRP/STRP EU/STRP NA logos. Body is Inter-adjacent (used loosely on
   the Tebex store & forums). Mono for server console / changelog vibes. */

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

:root {
  /* =======  RAW PALETTE  ======================================
     Every swatch below is sampled from the logo artwork directly.
  */

  /* Deep space — the background everything sits on */
  --st-void:         #05080F;  /* near-black edge of the sticker stroke */
  --st-space-900:    #0A1428;  /* deepest navy, primary page bg */
  --st-space-800:    #0F1B34;  /* elevated surface */
  --st-space-700:    #16274A;  /* card / panel */
  --st-space-600:    #1E3A6B;  /* raised card, helmet dome mid-tone */
  --st-space-500:    #2A4F8F;  /* helmet dome highlight / info */
  --st-space-400:    #3A6DBE;  /* nebula blue */

  /* Cyan glow — the signature neon ring on the helmet + visor */
  --st-cyan-300:     #7FF5F2;  /* soft glow halo */
  --st-cyan-400:     #3FE4E0;  /* "SPACE" wordmark fill */
  --st-cyan-500:     #1ED0CC;  /* primary cyan, default accent */
  --st-cyan-600:     #14A8A4;  /* pressed / hover-darken */
  --st-cyan-700:     #0E7F7C;  /* deep cyan, used for borders under text */

  /* Turtle greens — the flippers & skin */
  --st-green-300:    #4FD69A;  /* skin highlight */
  --st-green-400:    #2DA377;  /* skin mid */
  --st-green-500:    #1F7E5A;  /* flipper base */
  --st-green-600:    #155B42;  /* flipper shadow */

  /* Shell tans — the chest plates (very distinctive) */
  --st-shell-100:    #F5D9A8;  /* plate highlight */
  --st-shell-300:    #E8B876;  /* plate mid */
  --st-shell-500:    #C9945A;  /* plate edge */

  /* Stars / twinkle — warm off-white so they read on navy */
  --st-star:         #F4F2E8;
  --st-star-dim:     #C8C6BC;

  /* Semantic game colors (inherited loosely from GTA RP UI tropes) */
  --st-ban:          #C13A2F;  /* the BAN hammer red */
  --st-ban-deep:     #7A1F19;
  --st-warn:         #E6A93A;
  --st-ok:           #2DA377;
  --st-cop:          #2E6BE8;  /* LEO blue */
  --st-ems:          #E83A4A;  /* EMS red */

  /* SABS Anti-Cheat sub-brand (stark, utilitarian) */
  --sabs-black:      #0A0A0A;
  --sabs-white:      #FFFFFF;
  --sabs-hammer:     #F39324;  /* hammer tip orange */
  --sabs-steel:      #B8B8B8;

  /* =======  SEMANTIC TOKENS  ==================================
     Use these in components. Never ship a hex that isn't mapped. */

  /* Backgrounds */
  --bg-void:         var(--st-void);
  --bg-base:         var(--st-space-900);
  --bg-surface:      var(--st-space-800);
  --bg-card:         var(--st-space-700);
  --bg-raised:       var(--st-space-600);
  --bg-input:        #0C162C;

  /* Foregrounds */
  --fg-1:            #F4F8FF;  /* primary text, near-white with blue cast */
  --fg-2:            #B7C4DA;  /* secondary text */
  --fg-3:            #7A89A6;  /* tertiary / meta */
  --fg-muted:        #4F5D7A;  /* disabled / placeholder */
  --fg-on-accent:    #04120F;  /* text on cyan buttons */

  /* Accents */
  --accent:          var(--st-cyan-500);
  --accent-hover:    var(--st-cyan-400);
  --accent-press:    var(--st-cyan-600);
  --accent-glow:     0 0 24px rgba(30, 208, 204, 0.45);

  /* Borders */
  --border-1:        rgba(127, 245, 242, 0.10);  /* hairline */
  --border-2:        rgba(127, 245, 242, 0.22);  /* default */
  --border-strong:   rgba(127, 245, 242, 0.55);  /* focus ring inner */
  --border-sticker:  #05080F;  /* the thick black stroke around the mascot */

  /* State */
  --state-success:   var(--st-ok);
  --state-warn:      var(--st-warn);
  --state-danger:    var(--st-ban);
  --state-info:      var(--st-space-400);

  /* =======  SPACING / RADIUS / SHADOW  =========================
     4pt scale. Sticker-like chunky radii are a brand trait. */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* Shadows — almost no ambient shadow; we rely on the cyan glow */
  --shadow-sticker: 0 0 0 2px var(--border-sticker);     /* mascot outer stroke recreation */
  --shadow-card:    0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-pop:     0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-2);
  --shadow-glow:    0 0 0 1px var(--border-strong), 0 0 24px rgba(30,208,204,0.35);
  --shadow-glow-lg: 0 0 0 1px var(--border-strong), 0 0 48px rgba(30,208,204,0.5);

  /* =======  TYPE FAMILIES  ===================================== */
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif; /* logo-matching condensed */
  --font-ui:      'Oswald', 'Bebas Neue', system-ui, sans-serif; /* heavy but slightly less extreme */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* =======  TYPE SCALE  ======================================== */
  --fs-hero:   96px;
  --fs-h1:     64px;
  --fs-h2:     44px;
  --fs-h3:     28px;
  --fs-h4:     20px;
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-micro:  12px;
  --fs-eyebrow: 13px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tracking-hero:   -0.01em;
  --tracking-tight:  0em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.08em;     /* eyebrows, labels */
  --tracking-wider:  0.16em;     /* uppercase callouts */

  /* =======  MOTION  ============================================ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
}

/* =======  SEMANTIC ELEMENT STYLES  ============================ */

html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero, h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  color: var(--fg-1);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .small { font-size: var(--fs-small); color: var(--fg-3); }
.meta  { font-size: var(--fs-micro); color: var(--fg-3); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(127, 245, 242, 0.08);
  color: var(--st-cyan-300);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-1);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-shadow: 0 0 12px rgba(30,208,204,0.5); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin: var(--space-6) 0;
}

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