/* ============================================================
   Bürgercorps Edemissen — Foundations
   Colors, type scale, and semantic tokens.
   Import this file once into any page or kit.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:wght@400;500;600;700;800&family=UnifrakturMaguntia&display=swap');

:root {
  /* -------- Brand palette -------------------------------------------------- */

  /* The heart of the brand: forest greens and warm parchment.
     Green is the colour of every German Schützen- and Bürgercorps;
     parchment + warm gold reference printed Satzungen, oak leaves, and brass medals. */

  --bc-green-900:      #15281d;   /* "Tinte-Tann" — near-black green, used on signatures, deep backgrounds */
  --bc-green-800:      #1f3a2b;   /* "Schützengrün" — primary brand green */
  --bc-green-700:      #2d5a3d;   /* "Tannengrün" — hover / hairline */
  --bc-green-200:      #c2cfc5;   /* soft sage, dividers on cream */
  --bc-green-50:       #eef1ec;   /* faint sage wash */

  --bc-gold-700:       #8a6324;   /* "Alt-Messing" — deep brass, used for type accents on cream */
  --bc-gold-500:       #b8893a;   /* "Messing" — primary metallic, medals + flourishes */
  --bc-gold-300:       #d4a455;   /* "Antik-Gold" — bright accent on dark green */
  --bc-gold-100:       #ecd9a8;   /* "Bernstein" — soft warm fill */

  --bc-burgundy-700:   #6e1e1e;   /* "Burgunder" — Galauniform / Reiter, banners */
  --bc-burgundy-500:   #8c2a2a;   /* lighter Burgunder */

  /* Anthracite — the real uniform colour (the polo shirts every member wears) */
  --bc-anthracite-900: #1d2024;   /* deep anthracite */
  --bc-anthracite-800: #2a2d31;   /* "Polo-Anthrazit" — primary uniform */
  --bc-anthracite-700: #3d4047;   /* lighter anthracite */
  --bc-anthracite-300: #8b8f96;   /* worn anthracite */

  /* Königsfarben — the sash colours worn by the year's König / Königin */
  --bc-koenig-yellow:  #f5c542;   /* Königin-Schärpe — bright sunflower yellow */
  --bc-koenig-green:   #4a6b2a;   /* König-Schärpe — olive/moss velvet */

  /* Royal blue — the second mounted-officer uniform */
  --bc-royal-blue:     #1f4a7a;

  --bc-cream-50:       #faf6ea;   /* "Pergament hell" — page background */
  --bc-cream-100:      #f3ecd9;   /* "Pergament" — card surfaces */
  --bc-cream-200:      #e8dec2;   /* warmer parchment */
  --bc-cream-300:      #d6c9a3;   /* aged parchment */

  --bc-ink-900:        #1a1612;   /* "Tinte" — body type on cream */
  --bc-ink-700:        #3b3329;   /* "Tinte gedämpft" — secondary type */
  --bc-stein-500:      #6b665a;   /* "Stein" — warm gray for meta */
  --bc-stein-300:      #a8a294;   /* warm gray, captions / dividers */

  /* -------- Semantic tokens ----------------------------------------------- */

  --bc-bg:             var(--bc-cream-50);
  --bc-bg-elev:        var(--bc-cream-100);
  --bc-bg-inverse:     var(--bc-green-800);
  --bc-bg-uniform:     var(--bc-anthracite-800);  /* "polo" surfaces — modern member-area UI */

  --bc-fg-1:           var(--bc-ink-900);   /* primary text */
  --bc-fg-2:           var(--bc-ink-700);   /* secondary text */
  --bc-fg-3:           var(--bc-stein-500); /* tertiary / meta */
  --bc-fg-on-dark:     var(--bc-cream-100);
  --bc-fg-on-dark-2:   var(--bc-gold-300);

  --bc-accent:         var(--bc-green-800);
  --bc-accent-hover:   var(--bc-green-900);
  --bc-accent-soft:    var(--bc-green-50);

  --bc-gold:           var(--bc-gold-500);
  --bc-gold-on-dark:   var(--bc-gold-300);

  --bc-border:         #d4c9a8;            /* on cream */
  --bc-border-strong:  var(--bc-ink-900);
  --bc-border-on-dark: rgba(243, 236, 217, 0.22);

  --bc-danger:         var(--bc-burgundy-700);
  --bc-success:        var(--bc-green-700);

  /* -------- Type families -------------------------------------------------- */

  --bc-font-display:   "Cormorant Garamond", "EB Garamond", "Georgia", serif;
  --bc-font-body:      "Lora", "Georgia", "Iowan Old Style", serif;
  --bc-font-ui:        "Mulish", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --bc-font-fraktur:   "UnifrakturMaguntia", "Cormorant Garamond", serif;   /* only for monograms, festival headers */
  --bc-font-numeric:   "Lora", "Cormorant Garamond", serif;                /* tabular numbers */

  /* -------- Type scale ----------------------------------------------------- */

  --bc-text-xs:    12px;
  --bc-text-sm:    14px;
  --bc-text-base:  16px;
  --bc-text-md:    18px;
  --bc-text-lg:    22px;
  --bc-text-xl:    28px;
  --bc-text-2xl:   36px;
  --bc-text-3xl:   48px;
  --bc-text-4xl:   64px;
  --bc-text-5xl:   88px;

  --bc-leading-tight:  1.1;
  --bc-leading-snug:   1.25;
  --bc-leading-normal: 1.55;
  --bc-leading-loose:  1.75;

  --bc-tracking-tight: -0.01em;
  --bc-tracking-normal: 0;
  --bc-tracking-wide:   0.06em;
  --bc-tracking-caps:   0.18em;   /* used for Kapitälchen-style labels */

  /* -------- Spacing -------------------------------------------------------- */

  --bc-space-0:  0;
  --bc-space-1:  4px;
  --bc-space-2:  8px;
  --bc-space-3:  12px;
  --bc-space-4:  16px;
  --bc-space-5:  24px;
  --bc-space-6:  32px;
  --bc-space-7:  48px;
  --bc-space-8:  64px;
  --bc-space-9:  96px;
  --bc-space-10: 128px;

  /* -------- Radii ---------------------------------------------------------- */

  /* Bürgercorps designs are formal and traditional. Radii are small or absent. */
  --bc-radius-0:  0;
  --bc-radius-1:  2px;
  --bc-radius-2:  4px;
  --bc-radius-3:  6px;
  --bc-radius-pill: 999px;

  /* -------- Borders -------------------------------------------------------- */

  --bc-hairline:        1px solid var(--bc-border);
  --bc-rule-strong:     2px solid var(--bc-border-strong);
  --bc-rule-double:     4px double var(--bc-border-strong);
  --bc-rule-gold:       2px solid var(--bc-gold-500);

  /* -------- Shadows / elevation ------------------------------------------- */

  /* Quiet, paper-like — no fluffy material shadows. */
  --bc-shadow-flat:  none;
  --bc-shadow-paper: 0 1px 0 rgba(26, 22, 18, 0.06), 0 1px 2px rgba(26, 22, 18, 0.05);
  --bc-shadow-card:  0 2px 0 rgba(26, 22, 18, 0.04), 0 4px 18px rgba(26, 22, 18, 0.08);
  --bc-shadow-lift:  0 8px 28px rgba(21, 40, 29, 0.18);
  --bc-shadow-inner: inset 0 0 0 1px rgba(26, 22, 18, 0.08);

  /* -------- Motion --------------------------------------------------------- */

  --bc-ease:        cubic-bezier(0.32, 0.72, 0.24, 1);
  --bc-ease-out:    cubic-bezier(0.16, 0.84, 0.34, 1);
  --bc-duration-1:  120ms;
  --bc-duration-2:  220ms;
  --bc-duration-3:  360ms;

  /* -------- Layout --------------------------------------------------------- */

  --bc-container:        1180px;
  --bc-container-narrow: 760px;
  --bc-gutter:           24px;
}

/* ============================================================
   Base elements (use on a `<body class="bc">` or directly in a kit)
   ============================================================ */

.bc, body.bc {
  background: var(--bc-bg);
  color: var(--bc-fg-1);
  font-family: var(--bc-font-body);
  font-size: var(--bc-text-base);
  line-height: var(--bc-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bc-display,
.bc h1, .bc h2, .bc h3 {
  font-family: var(--bc-font-display);
  color: var(--bc-fg-1);
  font-weight: 600;
  letter-spacing: var(--bc-tracking-tight);
  line-height: var(--bc-leading-tight);
}

.bc h1 { font-size: var(--bc-text-4xl); font-weight: 700; }
.bc h2 { font-size: var(--bc-text-3xl); }
.bc h3 { font-size: var(--bc-text-2xl); }
.bc h4 { font-family: var(--bc-font-body); font-size: var(--bc-text-lg); font-weight: 600; line-height: var(--bc-leading-snug); }
.bc h5 { font-family: var(--bc-font-ui); font-size: var(--bc-text-sm); font-weight: 700; letter-spacing: var(--bc-tracking-caps); text-transform: uppercase; color: var(--bc-fg-2); }

.bc p { margin: 0 0 1em; text-wrap: pretty; }

.bc a { color: var(--bc-accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--bc-duration-1) var(--bc-ease); }
.bc a:hover { color: var(--bc-accent-hover); }

.bc small { font-size: var(--bc-text-sm); color: var(--bc-fg-3); }

/* Kapitälchen — small caps Section labels, very Bürgercorps */
.bc-eyebrow {
  font-family: var(--bc-font-ui);
  font-size: var(--bc-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--bc-tracking-caps);
  color: var(--bc-gold-700);
}

/* "Anno"-style date stamp */
.bc-anno {
  font-family: var(--bc-font-display);
  font-style: italic;
  color: var(--bc-fg-3);
  font-size: var(--bc-text-md);
}

/* Decorative golden flourish rule */
.bc-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bc-gold-500) 20%, var(--bc-gold-500) 80%, transparent);
  margin: var(--bc-space-5) 0;
}

/* Double rule — used under page titles */
.bc-rule-double {
  border: 0;
  border-top: 1px solid var(--bc-ink-900);
  border-bottom: 1px solid var(--bc-ink-900);
  height: 4px;
}