/* ============================================================
   NOI Network of Innovation — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ── Schriften: lokal self-hosted über fonts.css (kein externer Google-Aufruf) ──
   Frühere Einbindung war @import von fonts.googleapis.com — nun ersetzt durch
   fonts.css mit lokalen .woff2-Dateien (siehe /fonts). */

/* ── Base Color Palette ────────────────────────────────────── */
:root {
  /* Brand */
  --noi-pink:         #F236E0;   /* Primary pink — logo wordmark, orbit ring, CTAs */
  --noi-pink-warm:    #FF58B6;   /* Warm pink — alternate logo variant */
  --noi-pink-light:   #FEDDFB;   /* Tinted pink — backgrounds, hover bg */
  --noi-pink-dark:    #C61CB0;   /* Darker pink — hover states */

  --noi-green:        #C8F708;   /* Secondary lime — satellite nodes, "B2B Innovation Hub" lockup, highlights */
  --noi-green-dark:   #A3CC07;   /* Darker lime — hover / active states */
  --noi-green-light:  #ECFAB1;   /* Tinted lime — backgrounds, badges */

  /* Neutrals */
  --noi-black:        #0A0A0A;
  --noi-gray-900:     #1A1A1A;
  --noi-gray-700:     #444444;
  --noi-gray-500:     #888888;
  --noi-gray-300:     #CCCCCC;
  --noi-gray-100:     #F0F0F0;
  --noi-gray-50:      #F8F8F8;
  --noi-white:        #FFFFFF;

  /* ── Semantic Colors ──────────────────────────────────────── */
  --color-brand:          var(--noi-pink);
  --color-brand-alt:      var(--noi-green);
  --color-brand-hover:    var(--noi-pink-dark);
  --color-brand-subtle:   var(--noi-pink-light);
  --color-accent:         var(--noi-green);
  --color-accent-subtle:  var(--noi-green-light);

  --color-fg-primary:     var(--noi-gray-900);
  --color-fg-secondary:   var(--noi-gray-700);
  --color-fg-tertiary:    var(--noi-gray-500);
  --color-fg-inverted:    var(--noi-white);
  --color-fg-brand:       var(--noi-pink);

  --color-bg-page:        var(--noi-white);
  --color-bg-section:     var(--noi-gray-50);
  --color-bg-card:        var(--noi-white);
  --color-bg-dark:        var(--noi-gray-900);
  --color-bg-brand:       var(--noi-pink);

  --color-border:         var(--noi-gray-200, #E5E5E5);
  --color-border-strong:  var(--noi-gray-300);

  /* ── Typography ───────────────────────────────────────────── */
  --font-display:     'Outfit', sans-serif;   /* Headings, logo-adjacent text */
  --font-body:        'Inter', sans-serif;    /* Body, UI, captions */

  /* ⚠️ Substitution note: exact website typeface unverified.
     Outfit (display) + Inter (body) are the closest Google Fonts matches.
     Supply OTF/TTF files for pixel-perfect brand alignment. */

  /* Font weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* Type scale (base 16px) */
  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */
  --text-6xl:         3.75rem;    /* 60px */
  --text-7xl:         4.5rem;     /* 72px */

  /* Line heights */
  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.5;
  --lh-relaxed:       1.7;

  /* Letter spacing */
  --ls-tight:         -0.03em;
  --ls-snug:          -0.01em;
  --ls-normal:        0em;
  --ls-wide:          0.05em;
  --ls-wider:         0.1em;

  /* ── Spacing Scale ────────────────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── Border Radius ────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-brand: 0 4px 20px rgba(242, 54, 224, 0.25);
  --shadow-accent: 0 4px 20px rgba(200, 247, 8, 0.35);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    400ms ease;
}

/* ── Semantic Type Styles ─────────────────────────────────── */

.noi-h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-primary);
}

.noi-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-fg-primary);
}

.noi-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-fg-primary);
}

.noi-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-fg-primary);
}

.noi-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-fg-brand);
}

.noi-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-secondary);
}

.noi-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-fg-secondary);
}

.noi-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-fg-tertiary);
}

.noi-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-fg-tertiary);
}

/* ── Button Base Styles ───────────────────────────────────── */

.noi-btn {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.noi-btn-primary {
  background: var(--noi-pink);
  color: var(--noi-white);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-brand);
}
.noi-btn-primary:hover {
  background: var(--noi-pink-dark);
  transform: translateY(-1px);
}

.noi-btn-secondary {
  background: transparent;
  color: var(--noi-pink);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  border: 2px solid var(--noi-pink);
}
.noi-btn-secondary:hover {
  background: var(--noi-pink);
  color: var(--noi-white);
}

.noi-btn-ghost {
  background: transparent;
  color: var(--color-fg-secondary);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
}
.noi-btn-ghost:hover {
  color: var(--noi-pink);
  background: var(--noi-pink-light);
}

/* ── Card Base ────────────────────────────────────────────── */

.noi-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}

.noi-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  transition: all var(--transition-normal);
}