/* ============================================================
   SG Neustadt 1485 — Colors & Type  (v2, grounded in real assets)
   Schützengesellschaft Neustadt an der Weinstraße, seit 1485 e.V.
   ------------------------------------------------------------
   Palette sampled directly from the club crest and the live
   website (WordPress "Twenty Fifteen"-style theme):
     • Olive/leaf GREEN  — crest field + the site's green accent
     • Bright GOLD/yellow — crest outline, ribbons & the gold
                            serif site title on black
     • True-black SIDEBAR — the dark fixed menu column
     • White content + warm-grey supporting neutrals
   Type matches the real stack: Noto Serif (headings + body) and
   Noto Sans (menu, labels, UI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand GREEN (olive/leaf — crest + site accent) ---------- */
  --green-900: #20351A;
  --green-800: #2E4A22;
  --green-700: #3F6A30;   /* deep brand green */
  --green-600: #4E8233;   /* PRIMARY (buttons, fills) */
  --green-500: #57883F;   /* crest field colour */
  --leaf:      #52A240;   /* the site's interactive green (search, links) */
  --green-400: #7BA862;
  --green-300: #A6C492;
  --green-200: #C8DBB7;
  --green-100: #E8F0DE;

  /* ---------- Brand GOLD / yellow (crest + title) ---------- */
  --gold-800: #7E661B;
  --gold-700: #9C7F1E;
  --gold-600: #C2A02C;
  --gold-500: #E2C341;    /* crest gold (outline / ribbons) */
  --gold-title:#D8C84A;   /* gold serif site title on black */
  --gold-300: #EFD98A;
  --gold-200: #F4E7AC;
  --gold-100: #FBF5DA;

  /* ---------- Bullseye red (sparing accent / target) ---------- */
  --red-700: #9A2D22;
  --red-600: #B23A2B;
  --red-200: #E6C3BB;

  /* ---------- Dark (sidebar / header bar) ---------- */
  --sidebar:   #0C0C0C;   /* the fixed black menu column */
  --sidebar-2: #1A1A1A;
  --on-dark:   #FFFFFF;
  --on-dark-dim: #B7B5AD;

  /* ---------- Neutrals (white content + warm grey) ---------- */
  --bg-1: #FFFFFF;        /* content background */
  --bg-2: #F6F5F1;        /* subtle warm panel */
  --bg-3: #ECEAE2;
  --paper-warm: #FAF8F2;  /* heritage warm tint for cards/quotes */

  --ink-900: #1A1A18;     /* headings */
  --ink-700: #34322C;     /* body text */
  --ink-500: #6B685E;     /* secondary */
  --ink-400: #948F82;     /* captions */
  --ink-300: #BFB9AB;

  --border:        #E5E2D9;
  --border-strong: #D2CDBF;

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-muted: var(--ink-400);
  --fg-on-green: #FFFFFF;
  --fg-on-gold: #2C2407;

  /* ---------- Semantic roles ---------- */
  --primary:        var(--green-600);
  --primary-hover:  var(--green-700);
  --primary-active: var(--green-800);
  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-600);
  --link:           #3C7A2B;     /* readable green for body links */
  --link-hover:     var(--green-800);
  --success: var(--green-600);
  --warning: var(--gold-600);
  --danger:  var(--red-700);

  --ring: 0 0 0 3px color-mix(in srgb, var(--leaf) 45%, transparent);

  /* ============================================================
     TYPOGRAPHY  (real stack: Noto Serif + Noto Sans)
     ============================================================ */
  --font-serif: 'Noto Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* aliases for convenience */
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);  /* the site sets body in serif too */
  --font-ui:      var(--font-sans);   /* menus, labels, buttons */

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal:1.6;
  --leading-relaxed:1.75;

  --tracking-tight: -0.005em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-caps: 0.18em;   /* the site's tracked caps (titles, menu) */

  /* ---------- Radii (the real theme is mostly square) ---------- */
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---------- Shadows (restrained, neutral) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 18, 10, 0.07);
  --shadow-sm: 0 1px 3px rgba(20, 18, 10, 0.10), 0 1px 2px rgba(20, 18, 10, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 18, 10, 0.10), 0 2px 5px rgba(20, 18, 10, 0.06);
  --shadow-lg: 0 14px 34px rgba(14, 12, 6, 0.16);

  /* ---------- Spacing (8pt) ---------- */
  --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;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
/* Section title — light tracked serif caps, like "NEUIGKEITEN VOM VEREIN" */
.sg-section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, var(--text-2xl));
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--ink-900);
}
.sg-h1, .sg-prose h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2rem, 4vw, var(--text-3xl));
  line-height: var(--leading-tight); color: var(--fg-1);
}
.sg-h2, .sg-prose h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-1);
}
.sg-h3, .sg-prose h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-1);
}
.sg-overline {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--gold-700);
}
.sg-lead {
  font-family: var(--font-serif); font-size: var(--text-lg);
  line-height: var(--leading-relaxed); color: var(--fg-2);
}
.sg-p, .sg-prose p {
  font-family: var(--font-serif); font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--fg-2); text-wrap: pretty;
}
.sg-small { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--fg-3); }
.sg-caption { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-muted); }
/* Menu / UI label — tracked sans caps, like the sidebar nav */
.sg-menu { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sg-prose a, a.sg { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sg-prose a:hover, a.sg:hover { color: var(--link-hover); }
code.sg, .sg-prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1em 0.35em;
}