/* ============================================================
   Praxisrudel — Colors & Type
   Foundational + semantic tokens for the Praxisrudel design system.
   Fonts: Schibsted Grotesk (display), IBM Plex Sans (body),
          IBM Plex Mono (stats / prices / legal §-refs / codes)
   Loaded below via Google Fonts; the same families can be
   self-hosted later by replacing this @import with @font-face.
   ============================================================ */
@import url("vendor/fonts/fonts.css");

:root {
  /* ---- Brand: clinical teal -------------------------------- */
  --brand-900: #053C37;
  --brand-800: #064b44;
  --brand-700: #075A52;   /* dark sections, pressed */
  --brand-600: #0C7B6E;   /* PRIMARY — buttons, links, brand */
  --brand-500: #0E8C7C;   /* hover lift */
  --brand-400: #3AA99A;
  --brand-300: #6BC4B7;
  --brand-200: #ACE0D8;
  --brand-100: #DCF2EE;   /* tint surfaces */
  --brand-50:  #EFF8F6;   /* faint wash */

  /* ---- Ink / neutrals (teal-tinted, never pure grey) ------- */
  --ink-900: #0E1A19;     /* headings */
  --ink-800: #16302D;
  --ink-700: #243534;     /* strong body */
  --ink-600: #3C4D4B;
  --ink-500: #5A6B69;     /* muted body */
  --ink-400: #8A9794;     /* placeholder, captions */
  --ink-300: #B4C0BD;
  --line:    #E3EAE8;     /* hairline borders */
  --line-strong: #D2DCD9;
  --paper:   #F5F7F6;     /* page background */
  --paper-2: #EEF2F1;     /* alt section background */
  --surface: #FFFFFF;     /* cards */

  /* ---- Ampel — THE core functional motif (status system) --- */
  --ok:        #1E9E5A;   --ok-bg:   #E4F6EC;   --ok-line:   #BFE6CD;
  --warn:      #C98A06;   --warn-bg: #FBF1D6;   --warn-line: #EBD79B;
  --risk:      #DC4B4B;   --risk-bg: #FBE7E7;   --risk-line: #F1C6C6;
  --info:      #2563B8;   --info-bg: #E6EEF9;   --info-line: #C2D5F0;

  /* ---- Accent: AI / KI moments (soft mint glow) ------------ */
  --ai:        #0EA48F;
  --ai-bg:     #D6F3EC;
  --ai-glow:   0 0 0 4px rgba(14,164,143,.14); /* @kind shadow */

  /* ---- Type families -------------------------------------- */
  --display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; /* @kind font */
  --sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* @kind font */
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* @kind font */

  /* ---- Type scale (web) ----------------------------------- */
  --fs-display:  clamp(2.6rem, 5.2vw, 4.5rem);  /* @kind font */ /* hero */
  --fs-h1:       clamp(2.1rem, 3.6vw, 3rem); /* @kind font */
  --fs-h2:       clamp(1.6rem, 2.4vw, 2.1rem); /* @kind font */
  --fs-h3:       1.3rem;
  --fs-h4:       1.0625rem;
  --fs-body:     1rem;       /* 16 */
  --fs-sm:       0.875rem;   /* 14 */
  --fs-xs:       0.75rem;    /* 12 — eyebrows, chips */
  --fs-stat:     clamp(2.2rem, 3.4vw, 3rem);  /* @kind font */ /* big mono numbers */

  /* ---- Radii ---------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing (4px base) --------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- Shadows (soft, low, never harsh) ------------------- */
  --sh-xs: 0 1px 2px rgba(14,26,25,.05);
  --sh-sm: 0 1px 3px rgba(14,26,25,.06), 0 1px 2px rgba(14,26,25,.04);
  --sh-md: 0 4px 16px rgba(14,26,25,.07), 0 1px 3px rgba(14,26,25,.05);
  --sh-lg: 0 14px 40px rgba(14,26,25,.10), 0 4px 12px rgba(14,26,25,.06);
  --sh-brand: 0 8px 24px rgba(12,123,110,.22);

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --t-fast: 120ms; /* @kind other */
  --t-base: 200ms; /* @kind other */
  --t-slow: 360ms; /* @kind other */
}

/* ============================================================
   Semantic element styles (opt-in via .ds scope or globally)
   ============================================================ */
.ds-scope, body.praxisrudel {
  font-family: var(--sans);
  color: var(--ink-700);
  background: var(--paper);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-600);
}

h1, .h1 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h1);
  line-height: 1.08; letter-spacing: -.02em; color: var(--ink-900); }
h2, .h2 { font-family: var(--display); font-weight: 600; font-size: var(--fs-h2);
  line-height: 1.14; letter-spacing: -.015em; color: var(--ink-900); }
h3, .h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3);
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink-900); }
h4, .h4 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-h4);
  line-height: 1.3; color: var(--ink-900); }

.display { font-family: var(--display); font-weight: 800; font-size: var(--fs-display);
  line-height: 1.02; letter-spacing: -.03em; color: var(--ink-900); }

p { color: var(--ink-600); }
.lead { font-size: 1.18rem; line-height: 1.55; color: var(--ink-600); }
.muted { color: var(--ink-500); }
small, .sm { font-size: var(--fs-sm); }

/* Big mono stat — used for the concept's many figures */
.stat { font-family: var(--mono); font-weight: 600; font-size: var(--fs-stat);
  letter-spacing: -.02em; color: var(--ink-900); font-feature-settings: "tnum" 1; }

/* Legal / paragraph reference chip (§347 SGB V etc) */
.legal-ref { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-500); letter-spacing: .01em; }

code, .code, .data { font-family: var(--mono); font-size: .92em;
  font-feature-settings: "tnum" 1; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }