/* INOPREX HealthTec GmbH — Design Tokens V 1.0 (12.09.2026)
   Einzige Quelle der Designwerte. Generiert aus assets/tokens.json.
   Einbinden VOR allen anderen Stylesheets. Keine Farbwerte in Templates. */

:root {
  /* Primaer */
  --ix-color-indigo-deep: #0B1030;
  --ix-color-indigo: #151B3D;

  /* Akzent — nur Detail, niemals flaechig */
  --ix-color-cyan: #22D3EE;
  --ix-color-violet: #7C3AED;
  --ix-color-magenta: #DB2777;
  --ix-gradient-accent: linear-gradient(45deg, #22D3EE 0%, #7C3AED 50%, #DB2777 100%);

  /* Neutral */
  --ix-color-offwhite: #F7F8FB;
  --ix-color-white: #FFFFFF;
  --ix-color-gray-300: #D6D9E3;
  --ix-color-gray-500: #8E95AD; /* nur Linien/Flaechen — NIE Text */
  --ix-color-gray-700: #4B5163;

  /* Funktionsfarben */
  --ix-color-success: #0E7C4A;
  --ix-color-success-surface: #E7F6EE;
  --ix-color-success-border: #9BD7B7;
  --ix-color-warning: #8A5200;
  --ix-color-warning-surface: #FDF3E3;
  --ix-color-warning-border: #E8C68A;
  --ix-color-error: #B4133F;
  --ix-color-error-surface: #FDECF1;
  --ix-color-error-border: #F0A9BF;
  --ix-color-info: #15558A;
  --ix-color-info-surface: #EAF2FA;
  --ix-color-info-border: #A9C6E3;

  /* Abstaende, Basis 4 px */
  --ix-space-1: 4px;
  --ix-space-2: 8px;
  --ix-space-3: 12px;
  --ix-space-4: 16px;
  --ix-space-5: 24px;
  --ix-space-6: 32px;
  --ix-space-7: 48px;
  --ix-space-8: 64px;

  /* Layout */
  --ix-container-max: 1280px;
  --ix-measure-max: 68ch;
  --ix-gutter: 24px;
  --ix-section-gap: 96px;
  --ix-section-gap-mobile: 56px;

  /* Radien */
  --ix-radius-none: 0;
  --ix-radius-sm: 2px;
  --ix-radius-md: 4px;
  --ix-radius-icon: 9px;

  /* Schatten — flach, kein Glanz */
  --ix-shadow-1: 0 1px 2px rgba(11, 16, 48, .06);
  --ix-shadow-2: 0 2px 6px rgba(11, 16, 48, .10);

  /* Typografie */
  --ix-font-display: "Archivo", Helvetica, Arial, sans-serif;
  --ix-font-text: "IBM Plex Sans", Arial, sans-serif;
  --ix-font-mono: "IBM Plex Mono", monospace;
  --ix-tracking-caps: .09em;

  --ix-text-h1: 600 clamp(30px, 4vw, 56px)/1.15 var(--ix-font-display);
  --ix-text-h2: 600 30px/1.2 var(--ix-font-display);
  --ix-text-h3: 600 22px/1.3 var(--ix-font-display);
  --ix-text-h4: 500 17px/1.35 var(--ix-font-display);
  --ix-text-body: 400 16px/1.55 var(--ix-font-text);
  --ix-text-small: 400 14px/1.5 var(--ix-font-text);
  --ix-text-caption: 400 12px/1.45 var(--ix-font-mono);
  --ix-text-table: 400 14px/1.45 var(--ix-font-text);
  --ix-text-button: 600 15px/1 var(--ix-font-display);
  --ix-text-label: 500 12px/1.3 var(--ix-font-mono);

  /* Komponenten */
  --ix-control-height: 44px;
  --ix-border-hairline: 1px solid var(--ix-color-gray-300);
  --ix-focus-ring: 2px solid var(--ix-color-violet);
  --ix-transition: 160ms ease-out;

  /* Logo — gestapelte Web-Variante (HealthTec unter INOPREX), 182x46 */
  --ix-logo-height-desktop: 46px;
  --ix-logo-height-mobile: 40px;
  --ix-logo-min-width: 120px;
  --ix-header-height-desktop: 72px;
  --ix-header-height-mobile: 60px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ix-transition: 0ms; }
}