/* ============================================================
   WeCruiting Design System — Colors & Type
   ------------------------------------------------------------
   Import this file into any prototype:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Fonts: Poppins & Caveat werden DSGVO-konform erst nach
   Consent per JS geladen (siehe site.js Cookie-Banner). ---------- */

:root {
  /* ------------------------------------------------------------------
     COLORS — PRIMARY
     WeCruiting's signature is a deep forest green. Used as full-bleed
     section backgrounds, the logo mark color, and large headline
     containers. There is no blue or purple in the brand.
     ------------------------------------------------------------------ */
  --we-green-900: #063d2f;   /* darkest — shadows, text on cream */
  --we-green-800: #07452f;   /* brand primary — matches the logo background */
  --we-green-700: #0a5a3e;   /* hover state for primary */
  --we-green-600: #157052;   /* CTA hover / links on light bg */
  --we-green-500: #2b8d6e;   /* success / accent / illustrations */
  --we-green-200: #b9dcc9;   /* surface tint — hover chips, subtle fills */
  --we-green-100: #dfeee5;   /* selected states, pale backgrounds */
  --we-green-50:  #f1f8f3;   /* page wash — alternative to cream */

  /* ------------------------------------------------------------------
     COLORS — NEUTRAL
     Warm off-whites and soft greys. The brand avoids pure #FFF on
     large surfaces; page backgrounds lean cream/ivory for warmth.
     ------------------------------------------------------------------ */
  --we-cream:     #f6f1e7;   /* primary page surface, warm ivory */
  --we-paper:     #fbf8f2;   /* elevated cards on cream */
  --we-white:     #ffffff;   /* cards on green, form surfaces */
  --we-ink:       #0f1a15;   /* body text on light — very dark green-black */
  --we-ink-soft:  #2d3a33;   /* secondary text */
  --we-ink-muted: #6b7872;   /* muted meta, labels */
  --we-line:      #e4dfd4;   /* hairline borders on cream */
  --we-line-soft: #efeae0;   /* dividers, subtle */
  --we-line-dark: rgba(255,255,255,0.16); /* on-green hairline */

  /* ------------------------------------------------------------------
     COLORS — ACCENT
     Warm sand/clay accents lifted from the German market vibe
     (complements green without competing). Used sparingly for
     tags, illustrations, highlighters.
     ------------------------------------------------------------------ */
  --we-sand:      #e8d7a6;   /* highlight chip, underline highlight */
  --we-clay:      #c88a5a;   /* illustrative accent */
  --we-coral:     #d86f5a;   /* error / urgency only */

  /* ------------------------------------------------------------------
     COLORS — SEMANTIC
     Route these through roles, not raw colors, when composing UIs.
     ------------------------------------------------------------------ */
  --bg:          var(--we-cream);
  --bg-elevated: var(--we-paper);
  --bg-invert:   var(--we-green-800);
  --surface:     var(--we-white);

  --fg:          var(--we-ink);
  --fg-soft:     var(--we-ink-soft);
  --fg-muted:    var(--we-ink-muted);
  --fg-invert:   var(--we-white);
  --fg-on-green: rgba(255,255,255,0.82);

  --brand:       var(--we-green-800);
  --brand-hover: var(--we-green-700);
  --brand-soft:  var(--we-green-100);

  --accent:      var(--we-sand);
  --danger:      var(--we-coral);
  --success:     var(--we-green-500);

  --border:        var(--we-line);
  --border-soft:   var(--we-line-soft);
  --border-invert: var(--we-line-dark);

  /* ------------------------------------------------------------------
     TYPE — FAMILIES
     Primary:  Poppins. Rounded geometric sans, matches the friendly
               curvature of the "we" wordmark.
     Script:   Caveat. Handwritten accent for pull-quotes and the
               "handwritten annotation" motif seen on marketing pages.
     Mono:     system mono — used only for code/data displays.
     ------------------------------------------------------------------ */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Poppins', cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ------------------------------------------------------------------
     TYPE — SCALE
     Rooted at 16px. Headlines get a tight tracking and a heavier
     weight (700/800). Body copy is 400-500.
     ------------------------------------------------------------------ */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-hero: 88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --ls-hero:  -0.02em;
  --ls-h:     -0.01em;
  --ls-caps:  0.14em;

  /* ------------------------------------------------------------------
     SPACING — 4px base grid
     ------------------------------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ------------------------------------------------------------------
     RADII — generous, matches the rounded logo
     ------------------------------------------------------------------ */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ------------------------------------------------------------------
     SHADOWS — soft, low-contrast; brand avoids harsh dropshadows
     ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(6,61,47,0.05), 0 1px 1px rgba(6,61,47,0.04);
  --shadow-md: 0 8px 24px -12px rgba(6,61,47,0.18), 0 2px 6px rgba(6,61,47,0.06);
  --shadow-lg: 0 24px 48px -20px rgba(6,61,47,0.25), 0 8px 16px -8px rgba(6,61,47,0.10);
  --shadow-green: 0 18px 40px -16px rgba(7,69,47,0.45);

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

  /* Container */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use these class names OR the element selectors directly.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.we-hero, h1.we-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 7vw, var(--fs-hero));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--fg);
  text-wrap: balance;
}

.we-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h);
  text-wrap: balance;
}

.we-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h);
  text-wrap: balance;
}

.we-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.we-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.we-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}

.we-lead, p.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
}

.we-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
}

.we-small, small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.we-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--brand);
}

.we-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============================================================
   UTILITY — stroked highlight under text (marker motif)
   ============================================================ */
.we-highlight {
  background-image: linear-gradient(180deg, transparent 62%, var(--we-sand) 62%);
  padding: 0 2px;
}

/* ============================================================
   GLOBAL — focus ring matches brand
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--we-green-500);
  outline-offset: 2px;
  border-radius: 4px;
}