/* ============================================================
   Logopädie Tiefringer · Design Tokens
   Colors · Type · Spacing · Radii · Shadows · Motion
   Brand colors: #8cd259 (primary green), #ed0e58 (accent magenta)
   ============================================================ */
/* ---- Webfonts -----------------------------------------------
   Body: Roboto Flex (brand-supplied .woff2, variable axis fallback)
   Display + Mono: still Google Fonts (no brand files supplied)
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/roboto-flex-v30-latin-regular.woff2') format('woff2-variations'), url('fonts/roboto-flex-v30-latin-regular.woff2') format('woff2');
}

:root {
  /* ----- Brand · primary (sage / spring green) ----- */
  --color-primary-50: oklch(97% 0.03 138);
  --color-primary-100: oklch(94% 0.06 138);
  --color-primary-200: oklch(89% 0.10 138);
  --color-primary-300: oklch(83% 0.14 138);
  --color-primary-400: oklch(78% 0.18 138);
  --color-primary-500: #8cd259;
  /* canonical brand green */
  --color-primary-600: oklch(70% 0.20 138);
  --color-primary-700: oklch(62% 0.20 138);
  --color-primary-800: oklch(50% 0.18 138);
  --color-primary-900: oklch(36% 0.14 138);
  /* ----- Brand · secondary (magenta accent) -------- */
  --color-accent-50: oklch(97% 0.02 0);
  --color-accent-100: oklch(94% 0.05 0);
  --color-accent-200: oklch(88% 0.10 0);
  --color-accent-300: oklch(78% 0.18 0);
  --color-accent-400: oklch(68% 0.24 0);
  --color-accent-500: #ed0e58;
  /* canonical brand magenta */
  --color-accent-600: oklch(54% 0.27 0);
  --color-accent-700: oklch(46% 0.24 0);
  --color-accent-800: oklch(36% 0.20 0);
  --color-accent-900: oklch(26% 0.14 0);
  /* ----- Warm neutrals (slightly warm, not blue-grey) ----- */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FBFAF7;
  /* canonical warm-white surface */
  --color-neutral-100: oklch(96% 0.005 100);
  --color-neutral-200: oklch(92% 0.010 100);
  --color-neutral-300: oklch(86% 0.012 100);
  --color-neutral-400: oklch(72% 0.012 100);
  --color-neutral-500: #918f90;
  /* logo descriptor grey */
  --color-neutral-600: oklch(50% 0.012 100);
  --color-neutral-700: oklch(38% 0.012 100);
  --color-neutral-800: oklch(26% 0.012 100);
  --color-neutral-900: oklch(16% 0.012 100);
  /* never pure black */
  /* ----- Semantic colors (status) ----- */
  --color-success: var(--color-primary-700);
  --color-warning: oklch(78% 0.16 75);
  --color-danger: var(--color-accent-600);
  --color-info: oklch(70% 0.10 230);
  /* ----- Semantic surfaces & text ----- */
  --color-bg: var(--color-neutral-50);
  --color-surface: var(--color-neutral-0);
  --color-surface-tint: oklch(96% 0.04 138);
  /* very soft green wash */
  --color-fg: var(--color-neutral-800);
  --color-fg-muted: var(--color-neutral-600);
  --color-fg-soft: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-link: var(--color-primary-700);
  --color-link-hover: var(--color-primary-800);
  --color-focus-ring: var(--color-accent-500);
  /* ----- Type · families ----- */
  --font-display: 'Quicksand', 'Roboto Flex', system-ui, sans-serif;
  --font-body: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* ----- Type · scale (16px base, 1.25 ratio for body, 1.333 for display) ----- */
  --text-xs: 12px;
  /* 0.75rem */
  --text-sm: 14px;
  /* 0.875rem */
  --text-base: 16px;
  /* 1rem */
  --text-md: 18px;
  /* 1.125rem */
  --text-lg: 20px;
  /* 1.25rem */
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 52px;
  --text-5xl: 68px;
  --leading-tight: 1.15;
  --leading-snug: 1.30;
  --leading-normal: 1.55;
  --leading-relaxed: 1.70;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* ----- Spacing (8-pt grid) ----- */
  --space-0: 0;
  --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;
  /* ----- Layout ----- */
  --container-max: 1180px;
  --container-gutter: 24px;
  --container-gutter-lg: 48px;
  /* ----- Radii ----- */
  --radius-1: 6px;
  --radius-2: 12px;
  --radius-3: 20px;
  --radius-pill: 999px;
  /* ----- Shadows (warm-tinted) ----- */
  --shadow-1: 0 1px 2px oklch(20% 0.012 100 / 0.06), 0 1px 1px oklch(20% 0.012 100 / 0.04);
  --shadow-2: 0 4px 12px oklch(20% 0.012 100 / 0.08), 0 2px 4px oklch(20% 0.012 100 / 0.05);
  --shadow-3: 0 14px 40px oklch(20% 0.012 100 / 0.10), 0 6px 12px oklch(20% 0.012 100 / 0.06);
  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}
/* ============================================================
   Semantic typography classes
   ============================================================ */
html {
  font-size: 16px;
  color: var(--color-fg);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
}
/* Display & headings — Quicksand */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}
/* Body */
p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-muted);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-700);
}
small, .small {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  line-height: var(--leading-normal);
}
.caption {
  font-size: var(--text-xs);
  color: var(--color-fg-soft);
  letter-spacing: var(--tracking-wide);
}
/* Links */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base) var(--ease-out), text-decoration-thickness var(--dur-base) var(--ease-out);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}
/* Code */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-neutral-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
}
/* Focus — magenta ring, 2px @ 3px offset */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}