/* ============================================================
   Crunchtime · Design Tokens
   "Alles auf einen Tipp."
   ============================================================ */

/* ----- Fonts -----------------------------------------------
   Display: PP Neue Montreal (self-hosted, fonts/PPNeueMontreal-*.otf)
   UI/Body: Poppins (self-hosted, fonts/Poppins-*.ttf)
   Editorial: Lora (self-hosted, variable fonts/Lora-*.ttf)
   ----------------------------------------------------------- */

/* ---- PP Neue Montreal · Display ---- */
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/PPNeueMontreal-Thin.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("fonts/PPNeueMontreal-ThinItalic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/PPNeueMontreal-Light.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/PPNeueMontreal-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 350; font-display: swap;
  src: url("fonts/PPNeueMontreal-Book.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 350; font-display: swap;
  src: url("fonts/PPNeueMontreal-BookItalic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/PPNeueMontreal-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/PPNeueMontreal-Italic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/PPNeueMontreal-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/PPNeueMontreal-MediumItalic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/PPNeueMontreal-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/PPNeueMontreal-SemiBolditalic.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/PPNeueMontreal-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Neue Montreal"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/PPNeueMontreal-BoldItalic.otf") format("opentype");
}

/* ---- Lora · Editorial (variable) ---- */
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Lora-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

/* ---- Poppins · UI / Body ---- */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-ThinItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-BlackItalic.ttf") format("truetype");
}

:root {
  /* -------- Brand colors -------- */
  --ct-coral:           #F4845F;   /* Primary · Coral Flame */
  --ct-coral-hi:        #FF9B79;   /* Hover / highlight */
  --ct-coral-lo:        #D96A45;   /* Pressed / deeper */
  --ct-coral-glow:      rgba(244, 132, 95, 0.35);
  --ct-coral-soft:      rgba(244, 132, 95, 0.12);

  /* -------- Surfaces (dark) -------- */
  --ct-bg:              #0C0C12;   /* App background */
  --ct-bg-elev:         #14141C;   /* Slight lift */
  --ct-surface:         #1C1C26;   /* Card / panel */
  --ct-surface-2:       #25252F;   /* Raised card / popover */
  --ct-surface-3:       #2F2F3B;   /* Hover state for surfaces */

  /* -------- Text -------- */
  --ct-fg:              #EEEEF5;   /* Primary text */
  --ct-fg-muted:        #A6A6B3;   /* Secondary text */
  --ct-fg-dim:          #6B6B79;   /* Tertiary / meta */
  --ct-fg-faint:        #44444F;   /* Disabled / placeholder */
  --ct-fg-on-coral:     #1B0E08;   /* Text on coral fill */

  /* -------- Borders / dividers -------- */
  --ct-border:          rgba(255, 255, 255, 0.08);
  --ct-border-strong:   rgba(255, 255, 255, 0.14);
  --ct-border-coral:    rgba(244, 132, 95, 0.40);

  /* -------- Semantic / status -------- */
  --ct-win:             #4ADE80;   /* Exakt getippt / korrekt */
  --ct-win-soft:        rgba(74, 222, 128, 0.14);
  --ct-tendency:        #FACC15;   /* Tendenz richtig */
  --ct-tendency-soft:   rgba(250, 204, 21, 0.14);
  --ct-loss:            #F87171;   /* Falsch getippt */
  --ct-loss-soft:       rgba(248, 113, 113, 0.14);
  --ct-live:            #EF4444;   /* LIVE-Indikator */
  --ct-info:            #60A5FA;
  --ct-info-soft:       rgba(96, 165, 250, 0.14);

  /* -------- Sport accents -------- */
  --ct-pitch:           #1F3A2B;   /* Stadion-Grün, sehr dezent */
  --ct-court:           #3A2A1F;   /* Basketball-Holz */

  /* -------- Radii -------- */
  --ct-radius-xs:       4px;
  --ct-radius-sm:       8px;
  --ct-radius-md:       12px;
  --ct-radius-lg:       16px;
  --ct-radius-xl:       22px;
  --ct-radius-2xl:      28px;
  --ct-radius-pill:     999px;

  /* -------- Spacing scale (4px base) -------- */
  --ct-space-1:         4px;
  --ct-space-2:         8px;
  --ct-space-3:         12px;
  --ct-space-4:         16px;
  --ct-space-5:         20px;
  --ct-space-6:         24px;
  --ct-space-8:         32px;
  --ct-space-10:        40px;
  --ct-space-12:        48px;
  --ct-space-16:        64px;
  --ct-space-20:        80px;

  /* -------- Shadows + glow -------- */
  --ct-shadow-sm:       0 1px 2px rgba(0,0,0,0.4);
  --ct-shadow-md:       0 4px 12px rgba(0,0,0,0.45);
  --ct-shadow-lg:       0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --ct-shadow-pop:      0 16px 48px rgba(0,0,0,0.6);
  --ct-glow-coral:      0 0 0 4px var(--ct-coral-soft), 0 8px 28px var(--ct-coral-glow);
  --ct-inset-hairline:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* -------- Fonts (families) -------- */
  --ct-font-display:    "Neue Montreal", "PP Neue Montreal", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ct-font-ui:         "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ct-font-editorial:  "Lora", Georgia, "Times New Roman", serif;
  --ct-font-mono:       ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;

  /* -------- Type scale -------- */
  --ct-text-xs:         11px;
  --ct-text-sm:         13px;
  --ct-text-base:       15px;
  --ct-text-md:         17px;
  --ct-text-lg:         20px;
  --ct-text-xl:         24px;
  --ct-text-2xl:        30px;
  --ct-text-3xl:        38px;
  --ct-text-4xl:        48px;
  --ct-text-5xl:        64px;
  --ct-text-display:    84px;

  /* -------- Motion -------- */
  --ct-ease:            cubic-bezier(0.32, 0.72, 0.24, 1);
  --ct-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ct-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ct-dur-fast:        140ms;
  --ct-dur-base:        220ms;
  --ct-dur-slow:        420ms;
}

/* ============================================================
   Semantic type — drop-in classes
   ============================================================ */

.ct-display {
  font-family: var(--ct-font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, var(--ct-text-display));
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ct-fg);
  text-wrap: balance;
}

.ct-h1 {
  font-family: var(--ct-font-display);
  font-weight: 700;
  font-size: var(--ct-text-4xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ct-fg);
}

.ct-h2 {
  font-family: var(--ct-font-display);
  font-weight: 600;
  font-size: var(--ct-text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ct-fg);
}

.ct-h3 {
  font-family: var(--ct-font-display);
  font-weight: 600;
  font-size: var(--ct-text-2xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ct-fg);
}

.ct-h4 {
  font-family: var(--ct-font-display);
  font-weight: 600;
  font-size: var(--ct-text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ct-fg);
}

.ct-eyebrow {
  font-family: var(--ct-font-ui);
  font-weight: 600;
  font-size: var(--ct-text-xs);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ct-coral);
}

.ct-body {
  font-family: var(--ct-font-ui);
  font-weight: 400;
  font-size: var(--ct-text-base);
  line-height: 1.55;
  color: var(--ct-fg);
}

.ct-body-sm {
  font-family: var(--ct-font-ui);
  font-weight: 400;
  font-size: var(--ct-text-sm);
  line-height: 1.5;
  color: var(--ct-fg-muted);
}

.ct-meta {
  font-family: var(--ct-font-ui);
  font-weight: 500;
  font-size: var(--ct-text-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ct-fg-dim);
}

.ct-editorial {
  font-family: var(--ct-font-editorial);
  font-weight: 400;
  font-size: var(--ct-text-md);
  line-height: 1.65;
  color: var(--ct-fg);
}

.ct-quote {
  font-family: var(--ct-font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: var(--ct-text-xl);
  line-height: 1.4;
  color: var(--ct-fg);
}

.ct-numeric {
  font-family: var(--ct-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "ss01" 1;
}