/* PADIDA Design System — Tokens
   Portiert aus dem Claude-Design-Handoff (padida-design-system).
   Fonts werden self-hosted via theme.json eingebunden (DSGVO) — hier KEIN @import. */

:root {
  /* ---- Ink / neutrals (logo black is #231f20) ---- */
  --padida-ink-900: #231f20;
  --padida-ink-700: #463f41;
  --padida-ink-500: #6f686a;
  --padida-ink-400: #948d8f;
  --padida-ink-300: #c4bfbf;
  --padida-ink-200: #e3dedd;
  --padida-ink-100: #efeae8;

  /* ---- Surfaces ---- */
  --padida-white:      #ffffff;
  --padida-cream:      #faf7f1;
  --padida-cream-deep: #f3eee5;

  /* ---- Accent (teal-blue) ---- */
  --padida-accent:        #418fac;
  --padida-accent-strong: #357489;
  --padida-accent-deeper: #2c606f;
  --padida-accent-soft:   #e3eef2;
  --padida-accent-line:   #bcd6e0;

  /* ---- Pastels: the four PADIDA blob colors ---- */
  --padida-yellow:      #e8d684;
  --padida-yellow-soft: #f8f3d7;
  --padida-yellow-tint: #fdfbef;

  --padida-green:      #addcbb;
  --padida-green-soft: #e4f2e8;
  --padida-green-tint: #f1f8f3;

  --padida-blue:      #c2cde5;
  --padida-blue-soft: #eaf0f8;
  --padida-blue-tint: #f4f7fc;

  --padida-rose:      #e0cdcc;
  --padida-rose-soft: #efe6e5;
  --padida-rose-tint: #f8f3f2;

  /* ---- Semantic status ---- */
  --padida-success:      #5aa777;
  --padida-success-soft: #e4f2e8;
  --padida-warning:      #d8a93a;
  --padida-warning-soft: #f8f3d7;
  --padida-danger:       #c2685f;
  --padida-danger-soft:  #f5e6e4;
  --padida-info:         #418fac;
  --padida-info-soft:    #e3eef2;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--padida-white);
  --surface-card:    var(--padida-white);
  --surface-sunken:  var(--padida-cream-deep);
  --surface-accent:  var(--padida-accent-soft);

  --text-strong:  var(--padida-ink-900);
  --text-body:    var(--padida-ink-700);
  --text-muted:   var(--padida-ink-500);
  --text-faint:   var(--padida-ink-400);
  --text-onAccent:var(--padida-white);
  --text-link:    var(--padida-accent);

  --border-hairline: var(--padida-ink-200);
  --border-soft:     var(--padida-ink-100);
  --border-accent:   var(--padida-accent-line);

  --action:         var(--padida-accent);
  --action-hover:   var(--padida-accent-strong);
  --action-pressed: var(--padida-accent-deeper);
  --focus-ring:     #7fb4c7;

  /* ---- Typography families ---- */
  --font-serif: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --font-sans:  'Signika', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-serif);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Fluid sizes */
  --fluid-display: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem);
  --fluid-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3rem);
  --fluid-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --fluid-h3: clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --fluid-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);

  /* Type shorthands */
  --text-display: 600 var(--fluid-display)/1.2 var(--font-serif);
  --text-h1: 600 var(--fluid-h1)/1.2 var(--font-serif);
  --text-h2: 600 var(--fluid-h2)/1.2 var(--font-serif);
  --text-h3: 600 var(--fluid-h3)/1.2 var(--font-serif);
  --text-h4: 600 1.15rem/1.2 var(--font-serif);
  --text-quote: 400 var(--fluid-h3)/1.4 var(--font-serif);

  --text-lead: 300 var(--fluid-lead)/1.2 var(--font-sans);
  --text-body: 300 1.25rem/1.4 var(--font-sans);
  --text-body-sm: 300 1.0625rem/1.4 var(--font-sans);
  --text-caption: 400 0.875rem/1.4 var(--font-sans);
  --text-eyebrow: 600 0.8125rem/1.2 var(--font-sans);
  --text-label: 400 0.9375rem/1.2 var(--font-sans);

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;

  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;

  /* Radii */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;
  --radius-blob: 62% 38% 55% 45% / 55% 50% 50% 45%;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(35, 31, 32, 0.05);
  --shadow-sm: 0 2px 8px rgba(35, 31, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(35, 31, 32, 0.07);
  --shadow-lg: 0 18px 48px rgba(35, 31, 32, 0.10);
  --shadow-accent: 0 10px 28px rgba(65, 143, 172, 0.22);

  /* Layout */
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Motion */
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur-normal: 240ms;
  --dur-slow:   420ms;
}