:root {
  /* ---------- Light mode (default) ----------
     Ink scale runs background (--ink-0) → headline (--ink-9). */
  --ink-0: #ffffff;
  --ink-1: #fafafa;
  --ink-2: #f5f5f7;
  --ink-3: #ebebef;
  --ink-4: #d2d2d7;
  --ink-5: #a1a1a6;
  --ink-6: #6e6e73;
  --ink-7: #424245;
  --ink-8: #1d1d1f;
  --ink-9: #000000;

  /* Brand color — from Job4You logo ("4" green) */
  --c-brand: #86b653;
  --c-brand-soft: rgb(134 182 83 / 0.12);

  /* Product accents — JOB/FOKUS · JOB/INTEGRA · JOB/MONITOR · JOB/SUPPORT Brand */
  --c-fokus: #8c3e5c;   /* Plum */
  --c-integra: #1f6fb2; /* Blau */
  --c-monitor: #0f7a78; /* Teal */
  --c-support: #c28230; /* Amber */
  --c-ai: #6b4fbf;      /* Violett */
  --c-connect: #1f9d6b; /* Grün */

  /* Functional */
  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;

  /* Default accent (neutral on homepage) */
  --accent: var(--ink-9);
  --accent-soft: rgb(0 0 0 / 0.05);

  /* Shadows — light mode is softer, more diffuse */
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-elevated: 0 12px 40px -16px rgb(0 0 0 / 0.18);
  --shadow-glow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 30px 60px -30px rgb(0 0 0 / 0.25);

  /* Typography */
  --font-display: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.4vw, 1.375rem);
  --fs-600: clamp(1.5rem, 2.5vw, 2rem);
  --fs-700: clamp(2rem, 4vw, 3rem);
  --fs-800: clamp(2.75rem, 6vw, 4.5rem);
  --fs-900: clamp(3.5rem, 8vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.6;

  --track-display: -0.03em;
  --track-body: -0.005em;

  /* Spacing — 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(3.5rem, 8vw, 6.5rem);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2rem);
  --header-h: 4.5rem;
  --header-h-scrolled: 3.5rem;
}

/* ---------- Dark mode (opt-in) ---------- */
[data-theme="dark"] {
  --ink-0: #000000;
  --ink-1: #070708;
  --ink-2: #101013;
  --ink-3: #1a1a1f;
  --ink-4: #26262c;
  --ink-5: #48484f;
  --ink-6: #86868b;
  --ink-7: #b8b8bd;
  --ink-8: #e5e5ea;
  --ink-9: #fafafa;

  --c-brand: #a4cc6f;
  --c-brand-soft: rgb(164 204 111 / 0.16);

  --c-fokus: #c18eae;   /* Plum — auf dunkel */
  --c-integra: #7db7ea; /* Blau — auf dunkel */
  --c-monitor: #5fb8b5; /* Teal — auf dunkel */
  --c-support: #e0ab5c; /* Amber — auf dunkel */
  --c-ai: #a593e8;      /* Violett — auf dunkel */
  --c-connect: #6fcba1; /* Grün — auf dunkel */

  --success: #30d158;
  --warning: #ffd60a;
  --danger: #ff453a;

  --accent-soft: rgb(255 255 255 / 0.06);

  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-elevated: 0 10px 40px -10px rgb(0 0 0 / 0.6);
  --shadow-glow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 60px -30px rgb(0 0 0 / 0.8);
}