/* ============================================================
   Teamgeist Design System — Foundations
   Source of truth: teamgeist_CD_Manual_Redesign_2022_v4.pdf
   Plus: teamgeist.com, eisstock-berlin.de, your-teamevent.com
   ============================================================ */

/* ---------- 1. Webfont declarations ---------- */

@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Expressway';
  src: url('fonts/Expressway-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Local';
  src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {

  /* ---- Brand colors (from CD Manual p.24) ----
     The palette is intentionally tiny: red is the eyecatcher,
     dark gray carries every other text, light gray separates
     content blocks. White dominates. */
  --tg-red:        #ce2128;   /* "Fire Engine Red" — primary eyecatcher */
  --tg-red-ink:    #a91a20;   /* darker red for hover/press on red surfaces */
  --tg-red-tint:   #f8e3e4;   /* very light red — rare, info backgrounds */
  --tg-gray:       #575756;   /* dark gray — body text, headings on inner pages, ~80% black */
  --tg-gray-soft:  #8b8b8a;   /* derived — for muted/secondary text */
  --tg-gray-line:  #d2d2d1;   /* derived — hairline rules */
  --tg-light:      #e8e9f0;   /* light gray — section backgrounds, event-boxes on white */
  --tg-light-2:    #f3f4f7;   /* derived — even softer block bg */
  --tg-white:      #ffffff;
  --tg-black:      #000000;   /* used sparingly */

  /* Semantic */
  --bg-page:       var(--tg-white);
  --bg-block:      var(--tg-light);
  --bg-block-soft: var(--tg-light-2);
  --bg-accent:     var(--tg-red);
  --fg-primary:    var(--tg-gray);
  --fg-muted:      var(--tg-gray-soft);
  --fg-on-accent:  var(--tg-white);
  --fg-link:       var(--tg-red);
  --border-soft:   var(--tg-gray-line);

  /* ---- Type ---- */
  --font-display:  'Expressway', 'Arial Narrow', 'Helvetica', sans-serif;
  --font-body:     'Open Sans Local', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Type scale (16px base; print floor is 10–12pt per CD Manual p.22) */
  --t-display:   clamp(2.5rem, 4.5vw, 4rem);   /* 40–64px */
  --t-h1:        clamp(2rem, 3.4vw, 3rem);     /* 32–48 */
  --t-h2:        clamp(1.5rem, 2.4vw, 2.125rem); /* 24–34 */
  --t-h3:        1.25rem;       /* 20 */
  --t-h4:        1.0625rem;     /* 17 */
  --t-body:      1rem;          /* 16 */
  --t-small:     0.875rem;      /* 14 */
  --t-micro:     0.75rem;       /* 12 — floor */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---- Spacing (8px base, derived) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---- Radii (CD Manual p.32: "ca. 2mm" — i.e. small, friendly, never pill except for buttons/CTAs) ---- */
  --r-sm:  4px;   /* small inputs, badges */
  --r-md:  8px;   /* default boxes & cards */
  --r-lg:  12px;  /* large media wrappers */
  --r-pill: 999px;

  /* ---- Shadows (light, almost flat — the brand is print-rooted) ---- */
  --shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --shadow-pop:     0 4px 18px rgba(0,0,0,.10), 0 12px 36px rgba(0,0,0,.10);
  --shadow-inset:   inset 0 0 0 1px var(--border-soft);

  /* ---- Containers ---- */
  --max-w-prose:  68ch;
  --max-w-content: 1200px;
  --max-w-wide:   1440px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ---------- 3. Semantic element styles ----------
   Per CD Manual: headlines = Expressway (display), body = Open Sans.
   Headlines on inner pages are usually GRAY with red highlight word;
   cover/title headlines are RED (see p.36, p.25). */

.tg-base {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tg-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  color: var(--tg-red);
  letter-spacing: -0.005em;
}

.tg-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}
.tg-h1--accent { color: var(--tg-red); }

.tg-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.tg-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

/* Eyebrow / kicker: small, uppercase, dark gray. Common pattern from teamgeist.com slides. */
.tg-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.tg-lede {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);   /* Expressway Semibold is the alt; for body the Open Sans semibold also works as intro */
  font-size: 1.125rem;
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

.tg-p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

.tg-small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* The brand-name treatment: ALWAYS lowercase italic for "teamgeist" and sub-brands like tabtour®.
   See CD Manual p.15, p.21. */
.tg-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  text-transform: lowercase;
}

/* "Wir-Gefühl" red highlight word inside a gray headline */
.tg-accent-word { color: var(--tg-red); }

/* Links — red, underline on hover only */
.tg-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tg-link:hover { border-bottom-color: currentColor; }