/*
 * 1x1SPORT Design System — Colors & Typography
 * Source: Styleguide_1x1SPORT_VorerstFinal.pdf + 1x1sport.de
 *
 * Brand: 1x1SPORT — Online Fußballtrainer-Akademie (online football coach academy)
 * Spelling rule: "1x1SPORT" (preferred) or "1X1SPORT". Never "1x1 sport" or "1x1Sport".
 */

/* ────────────────────────────────────────────────────────────
   FONTS
   Brand decision (May 2026): we use **Archivo Black** as the display face
   instead of Lovelo. Archivo Black is loaded from Google Fonts and ships
   under the SIL OFL — no licensing friction.
   Body face is **Roboto Condensed** (Google Fonts), with the locally-supplied
   Roboto Condensed Bold .ttf taking precedence for Bold weight, and the
   InDesign-era **Helvetica Neue LT Std Condensed** kept available for print
   handoff files.
   ──────────────────────────────────────────────────────────── */
/* Web-only build: Roboto Condensed via Google Fonts (Light 300, Regular 400, Bold 700).
   Display-Font ist Lovelo Black (App-Konsistenz). Wird mit Impact als Fallback geliefert,
   weil Lovelo keine offene Webschrift ist. */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");

:root {
  /* ── PRIMARY COLORS ─────────────────────────────────────────
     From styleguide page 2. Order: blue accent, navy, lightgray, midgray. */
  --c-blue:       #59C2FB;   /* Primärfarbe — grafische Elemente, Hervorhebungen */
  --c-navy:       #1F2D3F;   /* Dark blue background, header bar */
  --c-navy-alt:   #1E2F40;   /* Secondary navy used in some print specs */
  --c-light-gray: #EFEFEF;   /* Light bg, light theme text on dark bg */
  --c-dark-gray:  #373C46;   /* Body text on light bg, neutral fg */
  --c-white:      #FFFFFF;
  --c-black:      #000000;

  /* ── SECONDARY COLORS ───────────────────────────────────────
     Screen / web values (styleguide p.3 top row). Use sparingly: max 2 colours in
     a single screen in addition to the blue primary. */
  --c-red:        #E80707;
  --c-yellow:     #FFD302;
  --c-orange:     #FF9800;
  --c-green:      #85CA59;
  --c-gray:       #666666;

  /* Final Cut / video-grade values (styleguide p.3 bottom row).
     Slightly muted equivalents used in motion design / broadcast. */
  --c-red-fc:     #D43023;
  --c-yellow-fc:  #F7D448;
  --c-orange-fc:  #F19E38;
  --c-green-fc:   #93C868;
  --c-gray-fc:    #666666;

  /* ── SEMANTIC TOKENS (light theme, default) ─────────────────
     "Background theme Light" — styleguide p.7. */
  --bg:           var(--c-light-gray);
  --bg-elevated:  var(--c-white);
  --fg:           var(--c-dark-gray);      /* Fließtext */
  --fg-muted:     #6B7280;
  --fg-on-accent: var(--c-white);
  --accent:       var(--c-blue);            /* Primärfarbe für grafische Elemente */
  --accent-fg:    var(--c-white);
  --border:       #D8DBE0;
  --divider:      #E2E5EA;

  /* Status — same hue family as secondary, semantic naming */
  --success:      var(--c-green);
  --warning:      var(--c-orange);
  --danger:       var(--c-red);
  --info:         var(--c-blue);

  /* ── FONT FAMILIES ──────────────────────────────────────────  */
  --font-display: "Lovelo Black", Impact, "Anton", "Oswald", system-ui, sans-serif;
  --font-body:    "Roboto Condensed", "Helvetica Neue LT Std", "Helvetica Neue", "Arial Narrow", system-ui, sans-serif;
  /* Print / InDesign equivalent of the body font — used in styleguide source files. */
  --font-body-print: "Helvetica Neue LT Std", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;

  /* ── TYPE SCALE (screen) ────────────────────────────────────
     Modular Scale, Basis 17 px, Stufenfaktor √φ ≈ 1.272 (halber Schritt
     des Goldenen Schnitts). Ergibt eine ruhige Stufung zwischen Body
     (17) → h4 (21) → h3 (27) → h2 (35) → h1 (44). .display nutzt φ²-
     Sprung über Body (≈ 72) für Hero-Marketing-Headlines.

     Display bleibt für Hero-Marketing-Seiten (Invite-Anfordern, 404).
     Doc-Titel (Impressum, Datenschutz) nutzen das schlankere h1.       */
  --fs-display: clamp(44px, 5.5vw, 72px);  /* Hero — Archivo Black / Lovelo, oft ALL CAPS */
  --fs-h1:      clamp(28px, 3vw, 44px);    /* Doc-Titel */
  --fs-h2:      clamp(22px, 2.2vw, 35px);
  --fs-h3:      27px;
  --fs-h4:      21px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  /* ── SPACING / RADII / SHADOWS ─────────────────────────────  */
  --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;
  --space-10: 128px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* Edges are usually crisp; shadow used very sparingly. Styleguide allows a light
     "Schlagschatten" on motion text for legibility — kept as a single token. */
  --shadow-sm: 0 1px 2px rgba(31, 45, 63, 0.10);
  --shadow-md: 0 4px 14px rgba(31, 45, 63, 0.12);
  --shadow-lg: 0 18px 40px rgba(31, 45, 63, 0.18);
  --shadow-text-motion: 0 2px 6px rgba(0,0,0,0.45); /* leichter Schlagschatten / video */

  /* ── ACCENT BAR (Focus Typo) ────────────────────────────────
     Styleguide p.11: a vertical bar to the left of a text block.
       15px wide • 15px above/below • 20px right of text • 20px left of bar         */
  --focus-bar-width:    15px;
  --focus-bar-gap:      20px;
  --focus-bar-pad-y:    15px;
  --focus-bar-color:    var(--c-blue);

  /* ── LAYOUT / VIDEO SAFE AREAS ──────────────────────────────
     For 16:9 / 1:1 / 4:5 video frames — styleguide p.6.
     Logo width 100px, edge margin 100px, top spacing for headline 200px.          */
  --video-edge:        100px;
  --video-headline-y:  200px;
  --video-subhead-y:   300px;
  --video-body-y:      450px;
}

/* ────────────────────────────────────────────────────────────
   DARK BLUE THEME (styleguide p.9)
   bg #1F2D3F • fg #EFEFEF • accent yellow #FFD302 / FC #F7D448
   ──────────────────────────────────────────────────────────── */
:root.theme-dark-blue,
.theme-dark-blue {
  --bg:           var(--c-navy);
  --bg-elevated:  #283A52;
  --fg:           var(--c-light-gray);
  --fg-muted:     #9BA8BC;
  --accent:       var(--c-yellow);
  --accent-fg:    var(--c-navy);
  --border:       #324966;
  --divider:      #2A3D55;
  --focus-bar-color: var(--c-yellow);
}

/* ────────────────────────────────────────────────────────────
   DARK / BLACK THEME (styleguide p.12)
   bg near-black • fg #EFEFEF • accent blue #59C2FB
   ──────────────────────────────────────────────────────────── */
:root.theme-dark,
.theme-dark {
  --bg:           #0E1218;
  --bg-elevated:  #1B2027;
  --fg:           var(--c-light-gray);
  --fg-muted:     #9BA3AE;
  --accent:       var(--c-blue);
  --accent-fg:    var(--c-navy);
  --border:       #262C36;
  --divider:      #1F252E;
  --focus-bar-color: var(--c-blue);
}

/* ────────────────────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES
   Page-level defaults so unstyled HTML still feels like the brand.
   ──────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;            /* Fließtext in Light */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-transform: uppercase;   /* Display face is used predominantly in ALL CAPS in the brand */
  color: var(--fg);
}
.display     { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.015em; }
h1, .h1      { font-size: var(--fs-h1); }
h2, .h2      { font-size: var(--fs-h2); }
h3, .h3      { font-size: var(--fs-h3); }
h4, .h4      { font-size: var(--fs-h4); }

/* Subheadline = Roboto Condensed Bold, NOT all caps — per styleguide pp.5–7 */
.subheadline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: none;
  letter-spacing: 0;
}

/* Eyebrow / kicker — small all-caps label, often above a headline */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--accent); }   /* "Auszeichnungen in Bold, Blau, beides oder + ALL CAPS" */
em { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 120ms ease;
}
a:hover { opacity: 0.7; }

hr { border: 0; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }

code, kbd, pre, samp {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* ────────────────────────────────────────────────────────────
   FOCUS TYPO — the iconic blue (or yellow) vertical bar accent
   Use:  <p class="focus-typo">…</p>
   ──────────────────────────────────────────────────────────── */
.focus-typo {
  position: relative;
  padding: var(--focus-bar-pad-y) 0 var(--focus-bar-pad-y) calc(var(--focus-bar-width) + var(--focus-bar-gap));
}
.focus-typo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--focus-bar-width);
  background: var(--focus-bar-color);
}

/* Utility: pitch background (the brand's white field-line motif) */
.bg-pitch {
  background-color: var(--c-light-gray);
  background-image: url("/public/assets/brand/pitch-light.png");
  background-size: cover;
  background-position: center;
}

/* ────────────────────────────────────────────────────────────
   LOGO "FAHNE" — the canonical badge treatment.
   Measured directly from the production header reference:
   • Box aspect w:h ≈ 0.72 (portrait, ~2:3)
   • Wordmark is BOTTOM-biased — sits low in the badge with a generous
     30 % whitespace on top, 8 % on the bottom, 8 % left/right.
   ──────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────
   LOGO "FAHNE" — the canonical badge treatment.
   • Box aspect w:h ≈ 0.72 (portrait)
   • Wordmark sits BOTTOM-biased with equal padding on bottom/left/right (8 %),
     and generous breathing room above (~30 %). Matches the production header.
   ──────────────────────────────────────────────────────────── */
.logo-fahne {
  --fahne-h: 88px;
  width: calc(var(--fahne-h) * 0.72);
  height: var(--fahne-h);
  background: #fff;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--fahne-h) * 0.30)
           calc(var(--fahne-h) * 0.08)
           calc(var(--fahne-h) * 0.08);
  box-sizing: border-box;
  flex-shrink: 0;
}
.logo-fahne .mark {
  width: 100%;
  height: 100%;
  background-color: #1F2D3F;
  -webkit-mask: url("/public/assets/brand/1x1sport-logo-wordmark.svg") center / contain no-repeat;
          mask: url("/public/assets/brand/1x1sport-logo-wordmark.svg") center / contain no-repeat;
}
/* Inverted variant: navy box with white wordmark, for use on light backgrounds. */
.logo-fahne.inverted        { background: #1F2D3F; }
.logo-fahne.inverted .mark  { background-color: #fff; }
/* Yellow accent variant — for dark-blue theme posts that need extra punch. */
.logo-fahne.yellow          { background: #FFD302; }
.logo-fahne.yellow .mark    { background-color: #1F2D3F; }