/* ============================================
   duktus.ai — Aura Design System (Matte Ceramic)
   Core CSS variables: colors + typography tokens
   ============================================ */

/* ──────────────────────────── FONT FACES ────────────────────────────
   All three brand families are self-hosted as variable fonts from /fonts/. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/InstrumentSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Newsreader-VariableFont_opsz_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
}
:root {
  /* ──────────────────────────── COLOR — Raw palette ────────────────────────────
     duktus-ai.de Squarespace-Palette (verifiziert 2026-04-23, site.css):
     accent #685AE6 · darkAccent #8A7AEF · lightAccent #E6E3F6 · ink #19192D · bg #F7F8FB
     Darauf basierend aufgebaut: Iris-Scale = primary purple, Violet-Scale = deep plum accent. */

  /* Iris — primary purple family (matches duktus-ai.de accent) */
  --iris-50:  #F2F0FB;
  --iris-100: #E6E3F6;   /* = duktus-ai.de lightAccent */
  --iris-200: #CDC6ED;
  --iris-300: #ACA0E4;
  --iris-400: #8A7AEF;   /* = duktus-ai.de darkAccent (lighter hover) */
  --iris-500: #685AE6;   /* = duktus-ai.de accent — primary default */
  --iris-600: #4F44B8;
  --iris-700: #3A3190;
  --iris-800: #28225C;

  /* Violet — deeper plum accent for emphasis contrast (serif emphasis words, eyebrow-accent) */
  --violet-50:  #F7F0FA;
  --violet-100: #ECDCF3;
  --violet-200: #D6B4E2;
  --violet-300: #BA88CB;
  --violet-400: #9C5EAF;
  --violet-500: #5D54A4;   /* accent default (corporate-aligned) */
  --violet-600: #5E2C6E;
  --violet-700: #42204E;

  /* Ceramic — cool-neutral ink scale (kept name, remapped from warm-beige to ink-neutral) */
  --ceramic-50:  #F7F8FB;  /* page background — kühles Off-White, = duktus-ai.de safeLightAccent */
  --ceramic-100: #EFF0F5;  /* card background */
  --ceramic-200: #E4E6ED;  /* subtle panel */
  --ceramic-300: #D1D4DF;  /* soft border */
  --ceramic-400: #9EA2B3;  /* disabled / muted */
  --ceramic-500: #6E7285;  /* muted fg */
  --ceramic-600: #484B5D;  /* secondary fg */
  --ceramic-700: #2F3242;  /* body fg */
  --ceramic-800: #19192D;  /* heading fg — = duktus-ai.de ink */
  --ceramic-900: #0F0F1F;  /* near-black, never #000 */

  /* Semantic clinical colors (used sparingly — never as decoration) */
  --semantic-success: #3E7D5E;   /* muted moss-green */
  --semantic-info:    #4A6B85;   /* muted blue-slate */
  --semantic-warn:    #C89A4A;   /* amber */
  --semantic-danger:  #B84545;   /* muted red */

  /* ──────────────────────────── COLOR — Semantic tokens ──────────────────────────── */
  --bg:            var(--ceramic-50);     /* page */
  --bg-elev-1:     var(--ceramic-100);    /* cards, panels */
  --bg-elev-2:     #FFFFFF;                /* modals, floating surfaces */
  --bg-subtle:     var(--ceramic-200);    /* muted fills */
  --bg-inverse:    var(--ceramic-800);    /* dark surfaces */

  --fg:            var(--ceramic-800);    /* primary text */
  --fg-1:          var(--ceramic-700);    /* body */
  --fg-2:          var(--ceramic-600);    /* secondary */
  --fg-muted:      var(--ceramic-500);    /* hints, timestamps */
  --fg-on-primary: #FFFFFF;
  --fg-on-dark:    var(--ceramic-50);

  --primary:       var(--iris-500);
  --primary-hover: var(--iris-400);   /* lighter on hover — spiegelt duktus-ai.de darkAccent */
  --primary-soft:  var(--iris-100);

  --accent:        var(--violet-500);
  --accent-hover:  var(--violet-600);
  --accent-soft:   var(--violet-100);

  --border:        var(--ceramic-300);
  --border-soft:   rgba(25, 25, 45, 0.08);     /* ink-based border */
  --border-strong: var(--ceramic-400);
  --ring:          rgba(104, 90, 230, 0.35);   /* iris focus ring */

  /* ──────────────────────────── TYPE — Families ──────────────────────────── */
  --font-display: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:   'Newsreader', "Iowan Old Style", "Source Serif Pro", Palatino, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ──────────────────────────── TYPE — Scale (modular, 1.25) ──────────────────────────── */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ──────────────────────────── SPACE — 4px grid ──────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ──────────────────────────── RADIUS ──────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-full: 9999px;

  /* ──────────────────────────── SHADOW — Aura ──────────────────────────── */
  /* Soft, cool, subtle — ink-based tint, nie shadow-lg */
  --aura-shadow:        0 4px 22px -6px rgba(25, 25, 45, 0.10);
  --aura-shadow-hover:  0 10px 34px -8px rgba(25, 25, 45, 0.16);
  --aura-shadow-inset:  inset 0 1px 0 0 rgba(255, 255, 255, 0.55);
  --aura-shadow-sm:     0 1px 2px 0 rgba(25, 25, 45, 0.06), 0 1px 1px 0 rgba(25, 25, 45, 0.04);
  --aura-focus-ring:    0 0 0 2px var(--iris-300);

  /* ──────────────────────────── MOTION — Aura-Snap ──────────────────────────── */
  --ease-snap:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --stagger:     70ms;
}

/* ============================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these directly; don't re-style h1/h2 globally.
   ============================================ */

html, body {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display — oversized hero headlines */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw + 1rem, var(--text-6xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.t-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.t-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg); }
.t-h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg); }
.t-card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg); }

/* Body */
.t-body      { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-1); }
.t-body-sm   { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-1); }
.t-body-lg   { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-1); }

/* UI */
.t-label     { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--fg); }
.t-button    { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0; }
.t-caption   { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-muted); }
.t-overline  { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }

/* Serif — clinical reports, disclaimers, long-form reading */
.t-serif       { font-family: var(--font-serif); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-1); }
.t-serif-lg    { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-1); }
.t-serif-quote { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg); }
.t-serif-disclaimer { font-family: var(--font-serif); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-2); }

/* Mono — IDs, codes, ICD-10, token values */
.t-mono      { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-regular); color: var(--fg-1); }
.t-mono-xs   { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }

/* Utility */
.t-muted   { color: var(--fg-muted); }
.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }