/* Design-Tokens, übernommen aus dem Claude-Design-Projekt "Befundscanner Design System".
   Zusammengefasst aus tokens/*.css. Einzige Änderung: die Schriften kommen aus
   fonts.css (selbst gehostet) statt vom Google-Fonts-CDN. */

/* ── colors ── */
/* Fassung 5 — am Logo gemessen. Primitive nie direkt im Layout verwenden. */
:root{
  /* Marke */
  --navy-900:#0A2135;
  --navy-700:#164156;
  --navy-600:#1E5165;
  --teal-600:#328695;
  --teal-500:#3EAAA0;
  --teal-300:#5CC2B4;

  /* Flächen und Text */
  --white:#FFFFFF;
  --surface-1:#F6F8F9;
  --surface-2:#EBEFF2;
  --ink-900:#101820;
  --ink-600:#56616B;
  --ink-on-dark:#EFF4F6;

  /* Flächen */
  --surface-page:var(--white);
  --surface-alt:var(--surface-1);
  --surface-sunken:var(--surface-2);
  --surface-inverse:linear-gradient(165deg,var(--navy-900),var(--navy-700));

  /* Text */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-on-inverse:var(--ink-on-dark);
  --text-link:var(--navy-600);
  --text-link-hover:var(--teal-600);
  --text-link-on-inverse:var(--teal-300);

  /* Interaktion */
  --cta-bg:var(--teal-600);
  --cta-bg-hover:#2A7280;
  --cta-text:#FFFFFF;
  --cta-min-height:48px;
  --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--teal-600);
  --focus-ring-dark:0 0 0 2px var(--navy-900),0 0 0 4px var(--teal-300);
  --highlight-bg:rgba(62,170,160,0.18);
  --highlight-border:var(--teal-600);
}

/* ── typography ── */
/* Zwei Familien, keine Serife. Vertraut statt redaktionell. */
:root{
  --font-display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Handschrift — ausschließlich für Hinweispfeile in Vorschauen, nie für Inhalte */
  --font-hand:"Caveat","Bradley Hand","Segoe Print",cursive;

  --display-tracking:-0.02em;
  --label-tracking:0.08em;

  --step-statement:clamp(38px,6vw,72px); /* @kind font */
  --step-h1:clamp(34px,4.6vw,54px); /* @kind font */
  --step-h2:clamp(26px,3.2vw,38px); /* @kind font */
  --step-h3:21px;
  --step-body:19px;
  --step-small:16px;
  --step-label:14px;

  --leading-tight:1.1;
  --leading-heading:1.25;
  --leading-body:1.6;
  --measure:62ch;
}

/* ── spacing ── */
:root{
  --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;

  --section-y:clamp(64px,8vw,104px); /* @kind spacing */
  --gutter:clamp(18px,4vw,36px); /* @kind spacing */
  --content-max:1180px;
}

/* ── borders ── */
/* Konventionell: leichte Karten mit weichem Schatten. */
:root{
  --border-hairline:rgba(16,24,32,0.10);
  --border-strong:rgba(16,24,32,0.20);
  --border-on-dark:rgba(239,244,246,0.16);
  --border-width:1px;
  --rule-width:2px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-pill:999px;

  --shadow-card:0 1px 2px rgba(16,24,32,0.04),0 4px 16px rgba(16,24,32,0.06);
  --shadow-lift:0 8px 28px rgba(16,24,32,0.12);

  /* Signature: Herkunfts-Linie — das einzige unkonventionelle Element */
  --origin-line-color:var(--teal-600);
  --origin-line-width:1.5px;
  --linenumber-color:rgba(16,24,32,0.32);
}

/* ── motion ── */
:root{
  --ease:cubic-bezier(0.2,0,0,1); /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --origin-flash:180ms cubic-bezier(0.2,0,0,1); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --origin-flash:0ms /* @kind other */}
}

/* ── base ── */
/* Minimale Grundlage. Keine Komponenten-Styles hier. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--step-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:var(--display-tracking);line-height:var(--leading-heading);margin:0}
h1{font-size:var(--step-h1);line-height:var(--leading-tight)}
h2{font-size:var(--step-h2)}
h3{font-size:var(--step-h3)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
hr{border:0;border-top:var(--border-width) solid var(--border-hairline);margin:var(--space-7) 0}
code,kbd,samp{font-family:var(--font-mono);font-size:0.92em}