/* ============================================================================
   InflamAI — Design-Tokens ("Contained Warmth"), Website-Ausgabe
   EINE Datei: Fonts + Farben + Typo + Spacing + Radius + Motion + Base.
   LIGHT-FIRST: :root = Porzellan-Hell (Website-Default), [data-theme="dark"]
   ist die sekundäre Option. Werte 1:1 aus dem App-Design-System.
   Fonts sind SELF-HOSTED (DSGVO — keine Google/unpkg/jsdelivr-CDNs).
   ========================================================================== */

/* --- Webfonts (woff2, latin) --------------------------------------------- */
/* SF Pro ist die echte Produktschrift auf Apple-Geräten (via ui-rounded /
   -apple-system, keine Datei nötig). Überall sonst rendern Nunito + Hanken. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/nunito-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/nunito-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  /* --- EMBER-AKZENT (~10 %) — identisch in beiden Themes ----------------- */
  --ember-amber:        #E8A838;
  --ember-amber-bright: #F0BC52;
  --ember-amber-deep:   #D4943A;
  --ember-on-light:     #8A5A16;
  --ember-on-accent:    #1A1008;
  --ember-amber-12:     rgba(232,168,56,0.12);
  --ember-amber-15:     rgba(232,168,56,0.15);
  --ember-amber-30:     rgba(232,168,56,0.30);
  --ember-amber-40:     rgba(232,168,56,0.40);
  --ember-gradient: linear-gradient(135deg, var(--ember-amber-bright), var(--ember-amber));

  /* --- Flame-Palette (nur fürs Maskottchen, nie UI-Chrome) --------------- */
  --flame-core: #FFD54F; --flame-mid: #FFB300; --flame-warm: #FF8F00;
  --flame-tip: #FFCC80;  --flame-cream: #F5E6C8;
  --flame-eye: #FFF8F0;  --flame-iris: #8D6E63; --flame-iris-edge: #5D4037;
  --flame-pupil: #2E1A0E; --flame-mouth: #5D4037;
  --spark-yellow: #FFEE58; --spark-orange: #FFB74D;

  /* --- Semantik (weich, nie alarmierend) --------------------------------- */
  --success: #6BCB77;
  --warning: #C96A1B;            /* Light-Wert; Dark überschreibt */
  --error:   #FF6B6B;
  --info:    #2E7FE0;            /* Light-Wert; Dark überschreibt */

  /* Schmerz-/Risiko-Skalen (immer mit Zahl/Wort paaren — farbfehlsicher) */
  --pain-low: #E8A838; --pain-medium: #E87D24; --pain-high: #FF6B6B;
  --pain-gradient: linear-gradient(90deg, #6BCB77 0%, #E8A838 45%, #E87D24 72%, #FF6B6B 100%);
  --risk-low: #6BCB77; --risk-moderate: #E8A838; --risk-high: #FF8C00; --risk-veryhigh: #FF6B6B;

  /* Kategorie-Akzente */
  --cat-exercise: #5BA4FC; --cat-medication: #E87D24;
  --cat-wellness: #E8A838; --cat-lifestyle: #AF52DE;

  /* --- LIGHT THEME (Website-Default): Porzellan, warm-klinisch ----------- */
  --bg-page:          #F0F2F5;
  --bg-secondary:     #F7F8FA;
  --bg-tertiary:      #EBEEF2;
  --surface-card:     #F7F8FB;
  --surface-elevated: #F9FAFC;
  --surface-default:  #E8EAEE;
  --surface-raised:   #DFE2E7;

  --text-primary:   #121212;
  --text-secondary: rgba(0,0,0,0.70);
  --text-tertiary:  rgba(0,0,0,0.62); /* ≥4.5:1 auch für Platzhalter/Captions */
  --text-on-accent: var(--ember-on-accent);

  --border-subtle: rgba(0,0,0,0.05);
  --separator:     rgba(0,0,0,0.08);
  --hairline:      rgba(20,24,33,0.09);
  --scrollbar-thumb: rgba(20,24,33,0.26);
  --accent-text:   var(--ember-on-light);   /* WCAG-AA-Kontrast auf hell */
  --paper:         #FFFFFF;
  --nav-bg:        rgba(247,248,251,0.78);

  --shadow-sm: 0 1px 2px rgba(20,24,33,0.06);
  --shadow-md: 0 4px 12px rgba(20,24,33,0.10);
  --shadow-lg: 0 12px 28px rgba(20,24,33,0.14);

  color-scheme: light;

  /* --- Typografie --------------------------------------------------------- */
  --font-display: ui-rounded, "Nunito", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 32px; --fs-title: 24px; --fs-title2: 20px; --fs-title3: 18px;
  --fs-headline: 17px; --fs-body: 16px; --fs-callout: 15px; --fs-subhead: 14px;
  --fs-caption: 13px; --fs-small: 12px; --fs-micro: 10px;
  --fs-metric: 36px; --fs-metric-medium: 28px; --fs-metric-small: 18px; --fs-metric-hero: 48px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.25; --lh-heading: 1.33; --lh-body: 1.5; --lh-snug: 1.4;
  --ls-display: -0.5px; --ls-title: -0.3px; --ls-normal: 0; --ls-caps: 1px;

  /* --- Spacing (4pt-Raster) ------------------------------------------------ */
  --space-xxxs: 2px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px;
  --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-xxxl: 64px;
  --screen-padding: 16px; --card-padding: 16px;

  /* --- Radius -------------------------------------------------------------- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-xxl: 24px; --radius-pill: 999px;
  --radius-button: 16px; --radius-card: 16px; /* Karten bleiben 12–16px — 20 wirkte aufgeblasen */

  /* --- Touch & Motion ------------------------------------------------------ */
  --touch-min: 56px; --btn-height: 56px; --btn-height-large: 64px;
  --dur-fast: 0.15s; --dur-normal: 0.25s; --dur-slow: 0.40s;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.97; --press-opacity: 0.9;
}

/* --- DARK THEME (sekundär, per Toggle) ------------------------------------
   „Contained Warmth"-Prinzip: KÜHLES, ruhiges Charcoal als Fundament (die
   originalen App-Dark-Werte aus dem Design-System) — Wärme kommt NUR aus dem
   Amber-Akzent + Ember. Keine warmen/braunen Flächen, keine Glow-Effekte;
   Tiefe entsteht aus aufgehellten Flächen + feinen neutralen Hairlines. ----- */
[data-theme="dark"] {
  --bg-page:          #0F1114;
  --bg-secondary:     #1A1C21;
  --bg-tertiary:      #292B30;
  --surface-card:     #212328;
  --surface-elevated: #25272D;
  --surface-default:  #1C1E23;
  --surface-raised:   #2C2E33;

  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.70);
  --text-tertiary:  rgba(255,255,255,0.58);

  --border-subtle: rgba(255,255,255,0.05);
  --separator:     rgba(255,255,255,0.08);
  --hairline:      rgba(255,255,255,0.10);
  --scrollbar-thumb: rgba(255,255,255,0.24);
  --accent-text:   var(--ember-amber);
  --paper:         #16181D;
  --nav-bg:        rgba(15,17,20,0.72);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.42);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.48);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.58);

  --warning: #E87D24;
  --info:    #5BA4FC;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur-normal: 0.01ms; --dur-slow: 0.01ms; }
}

/* --- Base / Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Browser-Oberflächen gehören zum Design: schmale, neutrale Scrollleiste,
     die in beiden Themes aus der Palette kommt statt aus dem OS-Default. */
  scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--bg-page);
  accent-color: var(--ember-amber);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-title);
  margin: 0;
  color: var(--text-primary);
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-decoration: none;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
input, textarea, select { caret-color: var(--ember-amber); }
::selection { background: var(--ember-amber-30); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--ember-amber); outline-offset: 2px; }