/* Kortex Design Tokens
   Abgeleitet vom Erscheinungsbild von kapitalundkrawalle.ch (Ghost-Theme "Mono").
   Farben wurden aus einem Screenshot bestimmt: gegen die Ghost-Theme-Einstellungen
   (Background color, Text color) pruefen und hier zentral nachziehen.
   Nur Light Mode; Dark Mode ist nicht entworfen. */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap");

:root {
  /* Flaechen */
  --bg: #F7F7F5;            /* Seitenhintergrund, warmes Hellgrau */
  --surface: #FFFFFF;       /* Karten */
  --surface-sunken: #FAFAF8;/* aufgeklappte Zeilen */

  /* Text */
  --ink: #111111;           /* Haupttext, primaere Buttons */
  --ink-2: #3A3A37;         /* Fliesstext in Karten */
  --muted: #5E5E5A;         /* Labels, Sekundaertext */
  --muted-2: #6E6E6A;       /* Hinweise, Disclaimer */
  --faint: #8A8A85;         /* gesperrte Elemente */

  /* Linien */
  --border: #DEDEDA;        /* Kartenrand */
  --divider: #ECECE8;       /* Zeilentrenner in Karten */
  --line-dashed: #C9C9C4;   /* gestrichelte Trenner in Karten, leere Ringe */
  --rule-dashed: #A3A39E;   /* gestrichelte Linie unter Seitentitel (k&k-Signatur) */
  --locked-border: #B5B5B0; /* gesperrte Karten, gestrichelt */
  --backdrop: rgba(17, 17, 17, 0.35); /* hinter dem Detail-Sheet (Onboarding) */

  /* Zustaende (die einzigen Farben) */
  --state-offensive: #2B6346; /* ● Offensiv, Aufwaertstrend, positive Rendite */
  --state-defensive: #8A4A0B; /* ◐ Defensiv, Zinsdruck, offene Ereignisse */

  /* Ringe in der Mischungs-Werkstatt: der Ring des aktuellen Schritts farbig, die anderen grau */
  --ring-basis: #2F4F7A;
  --ring-dynamisch: #5B4A86;
  --ring-rest: #E2E2DD;

  /* Korrelation (Karten, spaeter Matrix): blau gegenlaeufig, grau unabhaengig, rot gleichlaeufig */
  --corr-neg: #2F6DB5;
  --corr-mid: #C9C6BF;
  --corr-pos: #C0392B;

  /* Anlageklassen im Meldrum-Kreis und in Mini-Charts */
  --asset-equity: #4A4A46;
  --asset-equity-alt: #6F6F6A;
  --asset-bonds: #8C8C87;
  --asset-commodities: #B8B8B2; /* Gold und Rohstoffe */
  --asset-real-estate: #D8D8D2;

  /* Typografie */
  --font-mono: "Roboto Mono", ui-monospace, monospace; /* Titel, Labels, Buttons, Navigation, Zahlen */
  --font-text: "Roboto", system-ui, sans-serif;        /* Fliesstext */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --size-display: 44px;     /* Seitentitel: heute, morgen, verlauf, katalog, onboarding */
  --size-display-2: 40px;   /* "mein system" (laengerer Titel) */
  --size-question: 20px;    /* Fragen im Onboarding, Roboto 300 */
  --size-figure-l: 24px;    /* Kennzahlen gross */
  --size-figure-m: 20px;
  --size-body-l: 16px;
  --size-body: 14px;
  --size-label: 13px;       /* Sektions-Labels, mono, muted */
  --size-small: 12px;
  --size-micro: 11px;       /* Legenden */

  /* Form */
  --radius: 6px;            /* Karten, Buttons, Segmented Control */
  --radius-badge: 4px;      /* Tags, kauf/verkauf */
  --touch: 44px;            /* minimale Touch-Hoehe */
  --button-h: 50px;         /* primaere Buttons */

  /* Abstaende */
  --gutter: 20px;           /* Seitenrand mobil */
  --gap-section: 22px;
  --gap-block: 14px;
  --gap-tight: 10px;
  --pad-card: 16px;
}

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: var(--size-body);
}