/* =========================================================
   PLOUSH DESIGN SYSTEM — Colors & Typography
   =========================================================
   Brand pulled from 2022_Ploush_CI.pdf + wordmark assets.
   Brand font is GRAPHIK (Commercial Type). We use Inter as a
   free open-source near-substitute on the web. Request the
   official Graphik webfont licence from Ploush to replace. */

/* ---- Webfont — Inter (substitute for Graphik) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS (from CI) ---------- */
  --ploush-lime: #D0D23E;      /* primary — R208 G210 B62 */
  --ploush-sage: #C0D3C8;      /* secondary — R192 G211 B200 */
  --ploush-ink:  #232323;      /* primary text / bg — R35 G35 B35 */

  /* ---------- LIME SCALE ---------- */
  --lime-50:  #FAFBE3;
  --lime-100: #F2F4BB;
  --lime-200: #E5E880;
  --lime-300: #D8DB55;
  --lime-400: #D0D23E;         /* brand */
  --lime-500: #B8BA2C;
  --lime-600: #8F911F;
  --lime-700: #6B6D16;
  --lime-800: #42430D;

  /* ---------- SAGE SCALE ---------- */
  --sage-50:  #F2F7F4;
  --sage-100: #E1EBE5;
  --sage-200: #C0D3C8;         /* brand */
  --sage-300: #9CBAAA;
  --sage-400: #799E8B;
  --sage-500: #5A826E;
  --sage-600: #426255;
  --sage-700: #2D443B;

  /* ---------- INK / NEUTRAL SCALE ---------- */
  --ink-900: #0F0F0F;
  --ink-800: #1A1A1A;
  --ink-700: #232323;          /* brand */
  --ink-600: #2E2E2E;
  --ink-500: #4A4A4A;
  --ink-400: #737373;
  --ink-300: #A6A6A6;
  --ink-200: #D4D4D4;
  --ink-100: #ECECEC;
  --ink-50:  #F7F7F5;          /* warm paper tint */
  --ink-0:   #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --bg:            var(--ink-50);
  --bg-elevated:   var(--ink-0);
  --bg-inverse:    var(--ink-700);
  --bg-subtle:     var(--ink-100);
  --bg-accent:     var(--ploush-lime);
  --bg-accent-soft:var(--lime-100);

  --fg:            var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --fg-inverse:    var(--ink-0);
  --fg-accent:     var(--lime-600);

  --border:        var(--ink-200);
  --border-strong: var(--ink-700);
  --border-accent: var(--ploush-lime);

  --link:          var(--ink-700);
  --link-hover:    var(--lime-600);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', 'Graphik', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', 'Graphik', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizes — modular scale (1.25) pinned to 16px body */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  2rem;      /* 32 */
  --fs-3xl:  2.75rem;   /* 44 */
  --fs-4xl:  3.75rem;   /* 60 */
  --fs-5xl:  5rem;      /* 80 */
  --fs-6xl:  7rem;      /* 112 — hero display */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.16em; /* for ALL-CAPS labels — very Ploush */

  /* ---------- SPACING (8pt grid) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(35,35,35,.06);
  --shadow-sm: 0 2px 6px rgba(35,35,35,.08);
  --shadow-md: 0 8px 24px rgba(35,35,35,.10);
  --shadow-lg: 0 24px 48px -12px rgba(35,35,35,.18);
  --shadow-glow: 0 0 0 8px rgba(208,210,62,.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---------- LAYOUT ---------- */
  --container: 1240px;
  --gutter: 24px;
}

/* ---------- RESET-LIGHT ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01","cv01","cv11";
}

/* ---------- SEMANTIC TYPE ELEMENTS ---------- */

/* Hero display — always uppercase, ultra-tight, huge. Matches brand deck headers like "ANGEBOT SOFTWARE ENTWICKLER TEAM". */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, var(--fs-6xl));
  line-height: 0.95;
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}

h2, .t-h2 {
  font-size: clamp(1.75rem, 3.5vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

h3, .t-h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--space-3);
}

h4, .t-h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--space-3);
}

p, .t-body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
  text-wrap: pretty;
}

.t-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}

/* Eyebrow / section label — ALL CAPS, wide tracking. Core Ploush mannerism (REFERENZEN / ANGEBOT / KONTAKT). */
.t-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-small { font-size: var(--fs-sm); color: var(--fg-muted); }
.t-mono  { font-family: var(--font-mono); font-size: var(--fs-sm); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ploush-lime);
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

::selection { background: var(--ploush-lime); color: var(--ink-700); }