/* JFV Steinachtal/Waldachtal — Colors & Type
   Brand: youth football club, founded 2024, southwest Germany.
   Visual DNA: monochrome black/white badge logo, club-color accents in green & blue
   (used together as 🟢🔵 across all social posts), bold sporty typography, minimal chrome.
*/

@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand core ---------- */
  --jfv-black:        #0E0E10;   /* logo + primary ink */
  --jfv-white:        #FFFFFF;

  /* The two brand backgrounds — sampled directly from the homepage hero.
     These are the heart of the brand: navy + sage, paired side by side. */
  --jfv-navy:         #1F3755;   /* hero left panel · deep navy */
  --jfv-sage:         #7EB89C;   /* hero right panel · mint / soft sage */

  /* Supporting tints/shades derived from the two brand backgrounds. */
  --jfv-navy-deep:    #142336;
  --jfv-navy-soft:    #E1E6EE;
  --jfv-sage-deep:    #4F8A72;
  --jfv-sage-soft:    #E2F0E9;

  /* Legacy aliases — kept so existing files keep working.
     Map green/blue tokens onto sage/navy. */
  --jfv-green:        var(--jfv-sage);
  --jfv-green-deep:   var(--jfv-sage-deep);
  --jfv-green-soft:   var(--jfv-sage-soft);
  --jfv-blue:         var(--jfv-navy);
  --jfv-blue-deep:    var(--jfv-navy-deep);
  --jfv-blue-soft:    var(--jfv-navy-soft);

  /* ---------- Neutrals ---------- */
  --jfv-ink:          #0E0E10;
  --jfv-ink-2:        #2A2A30;
  --jfv-ink-3:        #555560;
  --jfv-ink-4:        #8A8A95;
  --jfv-line:         #E4E4E8;
  --jfv-surface:      #F6F6F4;   /* warm off-white, like worn jersey paper */
  --jfv-surface-2:    #FAFAF8;
  --jfv-bg:           #FFFFFF;

  /* ---------- Pitch / on-field accents ---------- */
  --jfv-pitch:        var(--jfv-sage-deep);  /* grass — hero panels */
  --jfv-pitch-line:   #FFFFFF;
  --jfv-whistle:      #F4B400;   /* alert / yellow card */
  --jfv-foul:         #E11D48;   /* error / red card */

  /* ---------- Semantic ---------- */
  --color-bg:         var(--jfv-bg);
  --color-surface:    var(--jfv-surface);
  --color-fg-1:       var(--jfv-ink);     /* primary text */
  --color-fg-2:       var(--jfv-ink-3);   /* secondary text */
  --color-fg-3:       var(--jfv-ink-4);   /* tertiary / meta */
  --color-line:       var(--jfv-line);
  --color-accent:     var(--jfv-navy);    /* primary brand color in UI */
  --color-accent-2:   var(--jfv-sage);    /* secondary, paired with navy */
  --color-on-accent:  var(--jfv-white);
  --color-success:    var(--jfv-sage-deep);
  --color-warning:    var(--jfv-whistle);
  --color-danger:     var(--jfv-foul);
  --color-link:       var(--jfv-navy);

  /* ---------- Type families ----------
     Script  = casual handwritten brush — the JFV-SW headline voice
               (sampled from the hero "Herzlich Willkommen")
     Body    = clean light sans for German running copy
     Stencil = secondary display for scoreboard / numeric / sport moments
  */
  --font-script:    "Lobster", "Lobster Two", cursive;
  --font-display:   "Lobster", "Lobster Two", cursive;
  --font-stencil:   "Oswald", "Inter", system-ui, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-overline:   12px;
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h6:         18px;
  --fs-h5:         22px;
  --fs-h4:         28px;
  --fs-h3:         36px;
  --fs-h2:         48px;
  --fs-h1:         64px;
  --fs-display:    96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* ---------- 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-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(14,14,16,.06), 0 1px 1px rgba(14,14,16,.04);
  --shadow-2: 0 4px 12px rgba(14,14,16,.08), 0 1px 2px rgba(14,14,16,.04);
  --shadow-3: 0 12px 32px rgba(14,14,16,.14), 0 4px 8px rgba(14,14,16,.06);
  --shadow-pop: 0 16px 40px rgba(29,95,191,.18), 0 4px 10px rgba(22,163,74,.10);

  /* Borders — the brand's badge has heavy stroke ringing it; we echo that */
  --bw-hair: 1px;
  --bw-strong: 2px;
  --bw-heavy: 4px;     /* badge-style outlines */

  /* Motion */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-snap: cubic-bezier(.5,1.5,.4,1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   360ms;
}

/* ---------- Element defaults ----------
   WICHTIG: Auf .pl-app gescoped, damit Seiten, die noch das alte
   Tailwind-Layout nutzen, NICHT beeinflusst werden.
   Die :root-Variablen oben bleiben global verfügbar. */
.pl-app {
  background: var(--color-bg);
  color: var(--color-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pl-app h1, .pl-app h2, .pl-app .display {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  text-transform: none;
}

.pl-app h3, .pl-app h4, .pl-app .stencil, .pl-app .eyebrow {
  font-family: var(--font-stencil);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.pl-app .display { font-size: var(--fs-display); }
.pl-app h1, .pl-app .h1 { font-size: var(--fs-h1); }
.pl-app h2, .pl-app .h2 { font-size: var(--fs-h2); }
.pl-app h3, .pl-app .h3 { font-size: var(--fs-h3); font-weight: 700; }
.pl-app h4, .pl-app .h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: .04em; }
.pl-app h5, .pl-app .h5 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h5); text-transform: none; line-height: var(--lh-snug); letter-spacing: -.005em; }
.pl-app h6, .pl-app .h6 { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-h6); text-transform: none; line-height: var(--lh-snug); }

.pl-app p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-fg-2); text-wrap: pretty; }
.pl-app a { color: var(--color-link); text-underline-offset: 3px; }

.pl-app .eyebrow,
.pl-app .overline { font-family: var(--font-display); font-size: var(--fs-overline); letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: var(--color-fg-2); }
.pl-app .caption { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--color-fg-3); }

.pl-app code, .pl-app kbd, .pl-app pre, .pl-app .mono { font-family: var(--font-mono); font-size: 0.92em; }

::selection  { background: var(--jfv-sage); color: var(--jfv-navy-deep); }