/* ============================================================
   Gründer Hub Hamburg — Colors & Type
   ============================================================
   Single source of truth for color tokens, typography scale,
   and semantic role mappings.
   Source: Gründerhubhamburg Brandkit.png
   Fonts: Roboto (Medium 500, Bold 700, Extrabold 800) — Google Fonts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800;900&display=swap');

:root {
  /* ---------- Brand colors (from Brandkit) ---------- */
  --gh-orange:       #FF4A1C;  /* Primary signal — Hamburg sunrise */
  --gh-navy:         #0A1929;  /* Wordmark + text dominant */
  --gh-pale-blue:    #ECF4FF;  /* Tint / soft surfaces */
  --gh-black:        #000000;
  --gh-white:        #FFFFFF;

  /* ---------- Extended scale (derived) ---------- */
  --gh-orange-600:   #E83E12;  /* hover/pressed */
  --gh-orange-100:   #FFE4D9;  /* tint surface */
  --gh-orange-50:    #FFF3EE;  /* lightest tint */

  --gh-navy-700:     #122236;  /* slight lift */
  --gh-navy-500:     #2A3A52;  /* mid */
  --gh-navy-300:     #6B7A8F;  /* muted text */
  --gh-navy-100:     #C7D0DD;  /* hairline / divider */

  --gh-paper:        #FAFBFC;  /* off-white surface */
  --gh-line:         #E6EAF0;  /* default border */

  /* ---------- Semantic foreground ---------- */
  --fg-1:            var(--gh-navy);       /* Headlines, primary text */
  --fg-2:            var(--gh-navy-500);   /* Body */
  --fg-3:            var(--gh-navy-300);   /* Captions / muted */
  --fg-on-orange:    var(--gh-white);
  --fg-on-navy:      var(--gh-white);
  --fg-link:         var(--gh-orange);

  /* ---------- Semantic background ---------- */
  --bg-1:            var(--gh-white);      /* App canvas */
  --bg-2:            var(--gh-paper);      /* Subtle surface */
  --bg-3:            var(--gh-pale-blue);  /* Tinted surface */
  --bg-inverse:      var(--gh-navy);       /* Dark sections */
  --bg-accent:       var(--gh-orange);

  /* ---------- Lines & dividers ---------- */
  --border:          var(--gh-line);
  --border-strong:   var(--gh-navy-100);
  --border-accent:   var(--gh-orange);

  /* ---------- Radius ---------- */
  --radius-xs:       4px;   /* small chips, tags */
  --radius-sm:       6px;   /* buttons, inputs */
  --radius-md:       10px;  /* cards */
  --radius-lg:       18px;  /* panels, hero blocks */
  --radius-xl:       28px;  /* feature blocks */
  --radius-pill:     999px;

  /* ---------- Spacing scale (4-pt) ---------- */
  --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;
  --space-10: 128px;

  /* ---------- Shadows (restrained, architectural) ---------- */
  --shadow-1: 0 1px 2px rgba(10, 25, 41, 0.04), 0 1px 1px rgba(10, 25, 41, 0.03);
  --shadow-2: 0 4px 12px rgba(10, 25, 41, 0.06), 0 1px 2px rgba(10, 25, 41, 0.04);
  --shadow-3: 0 12px 32px rgba(10, 25, 41, 0.10), 0 2px 6px rgba(10, 25, 41, 0.05);
  --shadow-pop: 0 18px 48px -12px rgba(255, 74, 28, 0.35);

  /* ---------- Type stack ---------- */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (px) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  120px;

  /* ---------- Weight ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-bold:     700;
  --w-extrabold: 800;
  --w-black:    900;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;  /* HAMBURG-style caps */

  /* ---------- Easing & motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic element styles — drop-in defaults
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-weight: var(--w-extrabold);
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--w-bold);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-weight: var(--w-bold);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-weight: var(--w-bold);
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  font-weight: var(--w-regular);
  color: var(--fg-2);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gh-orange);
}

.caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: 1.45;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

::selection { background: var(--gh-orange); color: var(--gh-white); }