/*
Theme Name:  GO!FlagFootball
Theme URI:   https://goflagfootball.de
Author:      Clemens Hochfeld
Description: Das offizielle Website-Theme für GO!FlagFootball – Bold, flat, graphic. German flag football brand, Olympia 2028.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.1
License:     All rights reserved
Text Domain: go-flagfootball
*/

/* ============================================================
   Design-Token-Layer — 1:1 aus dem Design-System portiert.
   Schriftpfade zeigen auf assets/fonts/ im Theme-Ordner.
   ============================================================ */

@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DIN 2014';
  src: url('assets/fonts/din-2014.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === BRAND CORE === */
  --c-yellow: #FFD412;
  --c-orange: #EF7D00;
  --c-green:  #3FA535;
  --c-purple: #5A3D8A;
  --c-blue:   #4A9CD6;

  --brand:     var(--c-orange);
  --brand-on:  #ffffff;
  --accent:    var(--c-yellow);
  --accent-on: var(--ink);
  --field:     var(--c-green);
  --night:     var(--c-purple);
  --sky:       var(--c-blue);

  /* Tints */
  --c-yellow-tint: #FFF6CD;
  --c-orange-tint: #FCE3CC;
  --c-green-tint:  #D9EFD6;
  --c-purple-tint: #DED5EC;
  --c-blue-tint:   #D6E8F5;

  /* Deep shades */
  --c-yellow-deep: #C9A60E;
  --c-orange-deep: #B86000;
  --c-green-deep:  #2E7C26;
  --c-purple-deep: #3F2A60;
  --c-blue-deep:   #2F77A8;

  /* === NEUTRALS (warm-paper neumorphic surface) === */
  --paper:    #ECE7DA;
  --paper-2:  #F2EEE3;
  --paper-3:  #DCD6C6;
  --paper-hi: #FFFFFF;
  --paper-lo: #C9C2B0;
  --ink:      #111111;
  --ink-2:    #2A2A2A;
  --ink-3:    #5A5A5A;
  --ink-4:    #9A9A9A;

  /* === SEMANTIC ROLES === */
  --bg:          var(--paper);
  --bg-panel:    var(--paper-2);
  --bg-sunk:     var(--paper-3);
  --fg-1:        var(--ink);
  --fg-2:        var(--ink-2);
  --fg-3:        var(--ink-3);
  --fg-on-brand: #ffffff;
  --line:        rgba(17,17,17,.10);
  --line-strong: rgba(17,17,17,.22);
  --success: var(--c-green);
  --warning: var(--c-yellow);
  --danger:  #D2342B;
  --info:    var(--c-blue);

  /* === SHADOWS (neumorphic paired system) === */
  --shadow-hi-1: -3px -3px 6px rgba(255,255,255,.85);
  --shadow-hi-2: -6px -6px 14px rgba(255,255,255,.80);
  --shadow-hi-3: -10px -10px 24px rgba(255,255,255,.75);
  --shadow-lo-1:  3px  3px 6px rgba(160,148,112,.28);
  --shadow-lo-2:  6px  6px 14px rgba(160,148,112,.32);
  --shadow-lo-3: 10px 10px 24px rgba(160,148,112,.40);

  --neu-1: var(--shadow-hi-1), var(--shadow-lo-1);
  --neu-2: var(--shadow-hi-2), var(--shadow-lo-2);
  --neu-3: var(--shadow-hi-3), var(--shadow-lo-3);

  --neu-inset-1: inset  2px  2px 4px  rgba(160,148,112,.28), inset -2px -2px 4px  rgba(255,255,255,.85);
  --neu-inset-2: inset  4px  4px 8px  rgba(160,148,112,.34), inset -4px -4px 8px  rgba(255,255,255,.85);
  --neu-inset-3: inset  6px  6px 12px rgba(160,148,112,.40), inset -6px -6px 12px rgba(255,255,255,.80);

  --shadow-block:    6px 6px 0 var(--ink);
  --shadow-block-sm: 3px 3px 0 var(--ink);
  --shadow-block-lg: 10px 10px 0 var(--ink);
  --shadow-soft-1: var(--neu-1);
  --shadow-soft-2: var(--neu-2);
  --shadow-soft-3: var(--neu-3);

  /* === RADII === */
  --radius-xs:   6px;
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-xl:   44px;
  --radius-pill: 999px;

  /* === SPACING === */
  --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;

  /* === MOTION === */
  --ease-snap:  cubic-bezier(.2, .9, .25, 1);
  --ease-burst: cubic-bezier(.16, 1.2, .3, 1);
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* === TYPE FAMILIES === */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'DIN 2014', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* === TYPE SCALE === */
  --fs-display-1: clamp(72px, 10vw, 168px);
  --fs-display-2: clamp(56px, 7vw, 112px);
  --fs-h1: clamp(44px, 5vw, 80px);
  --fs-h2: clamp(32px, 3.4vw, 56px);
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-meta: 12px;
  --lh-display: 0.88;
  --lh-heading: 1.02;
  --lh-body: 1.5;
}

/* Dark/nighttime variant */
[data-theme="dark"], .dark {
  --bg:          var(--c-purple-deep);
  --bg-panel:    var(--c-purple);
  --bg-sunk:     #2A1B45;
  --fg-1:        #ffffff;
  --fg-2:        rgba(255,255,255,.78);
  --fg-3:        rgba(255,255,255,.58);
  --line:        rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.30);
  --brand:       var(--c-yellow);
  --brand-on:    var(--ink);
  --shadow-block:    6px 6px 0 #000;
  --shadow-block-sm: 3px 3px 0 #000;
  --shadow-block-lg: 10px 10px 0 #000;
}

/* === BASE RESET + TYPE === */
*, *::before, *::after { box-sizing: border-box; }

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

img { max-width: 100%; display: block; height: auto; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4,
.display, .display-1, .display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: var(--lh-heading);
  margin: 0;
}

.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); letter-spacing: -0.01em; }
.display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); letter-spacing: -0.01em; }
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); letter-spacing: 0.04em; }
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0 0 var(--space-4); color: var(--fg-1); }

small, .meta {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-orange);
}

.stat {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.01em;
}

/* === BRAND MOTIFS === */
.football-oval {
  aspect-ratio: 16 / 9;
  border-radius: 50%;
  background: var(--c-green);
}
.half-split {
  background: linear-gradient(
    to right,
    var(--split-a, var(--c-orange)) 0 50%,
    var(--split-b, var(--c-green))  50% 100%
  );
}
.banner-stripe {
  background: var(--c-orange);
  color: #fff;
  padding: var(--space-5) var(--space-6);
}
.block-shadow { box-shadow: var(--shadow-block); }

/* WordPress alignment helpers */
.alignleft  { float: left;  margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { margin-left: auto; margin-right: auto; }