/* =============================================================
   PolyTALENT Design System — Colors & Type
   Brand: PolyTALENT GmbH — Personalberatung & digitaler Headhunter
   für den industriellen Mittelstand (DACH).
   ============================================================= */

/* ---------- Webfonts ----------
   Per brand decision, the entire system uses a single family: Inter.
   Display / headlines lean on heavier weights (800/900) instead of a
   second condensed family.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */

  /* Primary brand blue — sampled directly from the wordmark "TALENT" */
  --pt-blue-500: #009edb;        /* Primary brand blue */
  --pt-blue-600: #0087bb;        /* Hover / pressed */
  --pt-blue-700: #0073a0;        /* Deep accent */
  --pt-blue-400: #2eb6e6;        /* Lighter highlight */
  --pt-blue-300: #7ed1ee;        /* Tints, badges */
  --pt-blue-100: #d6effa;        /* Surface tint */
  --pt-blue-50:  #eef8fc;        /* Faintest wash */

  /* Brand dark — the navy/near-black logo background */
  --pt-ink-900: #0b1620;         /* Hero / footer background */
  --pt-ink-800: #11202c;         /* Cards on dark */
  --pt-ink-700: #1a2c3a;         /* Borders on dark */
  --pt-ink-600: #2a3e4d;

  /* Neutrals (cool grey scale, leans slightly blue to harmonize) */
  --pt-grey-50:  #f6f8fa;
  --pt-grey-100: #eceff3;
  --pt-grey-200: #dde2e8;
  --pt-grey-300: #c4ccd5;
  --pt-grey-400: #97a2ad;
  --pt-grey-500: #6b7681;
  --pt-grey-600: #4a545e;
  --pt-grey-700: #2f3841;
  --pt-grey-800: #1c232b;
  --pt-grey-900: #0e1318;

  --pt-white:    #ffffff;
  --pt-black:    #000000;

  /* ============================================================
     COLORS — Semantic
     ============================================================ */
  --bg:           var(--pt-white);
  --bg-subtle:    var(--pt-grey-50);
  --bg-muted:     var(--pt-grey-100);
  --bg-inverse:   var(--pt-ink-900);

  --surface:      var(--pt-white);
  --surface-2:    var(--pt-grey-50);
  --surface-dark: var(--pt-ink-800);

  --fg-1:         var(--pt-ink-900);   /* Headings / primary text */
  --fg-2:         var(--pt-grey-700);  /* Body */
  --fg-3:         var(--pt-grey-500);  /* Secondary / meta */
  --fg-4:         var(--pt-grey-400);  /* Disabled / placeholder */
  --fg-on-dark:   var(--pt-white);
  --fg-on-brand:  var(--pt-white);

  --border:       var(--pt-grey-200);
  --border-strong:var(--pt-grey-300);
  --border-dark:  var(--pt-ink-700);

  --accent:       var(--pt-blue-500);
  --accent-hover: var(--pt-blue-600);
  --accent-press: var(--pt-blue-700);
  --accent-tint:  var(--pt-blue-100);

  --success:      #16a34a;
  --warning:      #f59e0b;
  --danger:       #dc2626;
  --info:         var(--pt-blue-500);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (clamp-based, fluid) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

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

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ============================================================
     SPACING — 4pt base
     ============================================================ */
  --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;

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

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(11, 22, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 22, 32, 0.06), 0 1px 2px rgba(11, 22, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 22, 32, 0.08), 0 2px 4px rgba(11, 22, 32, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 22, 32, 0.10), 0 4px 8px rgba(11, 22, 32, 0.05);
  --shadow-xl: 0 24px 48px rgba(11, 22, 32, 0.16);
  --shadow-glow: 0 0 0 4px rgba(0, 158, 219, 0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* =================================================================
   SEMANTIC TYPE STYLES
   ================================================================= */

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

.pt-display-1, h1.pt-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.pt-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.pt-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.pt-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.pt-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.pt-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pt-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.pt-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pt-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.pt-body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.pt-meta {
  font-size: var(--fs-13);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.pt-quote {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  font-style: italic;
}

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