/* ============================================================
   EA-Wissenswerk – Design-Tokens
   Farben, Typografie, Spacing, Maßstäbe.
   Alles über CSS Custom Properties → leicht zu themen.
   ============================================================ */

:root {
  /* -------- Farben: Hintergrund & Text -------- */
  --c-bg:          #F8F6F1;   /* warmweiß / Pergament */
  --c-bg-soft:    #F1EDE3;   /* leicht gedämpft */
  --c-bg-card:    #FFFFFF;   /* Karten */
  --c-text:       #1F1F1F;   /* dunkles Anthrazit */
  --c-text-soft:  #4A4A4A;
  --c-text-mute:  #7A756B;   /* warmgrau für Nebentexte */
  --c-line:       #E2DCCF;   /* feine Trennlinien */
  --c-line-soft:  #ECE6D8;

  /* -------- Akzente nach Bereich --------
     Burgund = Anthropologie / Person.
     Vier GM-Farben aus Erdtönen, in der Reihenfolge
     1 schiefer  | 2 ocker | 3 oliv | 4 indigo.
  */
  --c-anthro:     #7A2E2E;   /* tiefes Burgund */
  --c-anthro-50:  #F5E6E6;

  --c-gm1:        #5A6E7D;   /* schiefer-blau, Festigkeit */
  --c-gm1-50:     #E6ECF1;
  --c-gm2:        #B8843A;   /* warm-ocker, Zuwendung */
  --c-gm2-50:     #F5EAD4;
  --c-gm3:        #6B7A3E;   /* olivgrün, Eigen-Sein */
  --c-gm3-50:     #EBEEDB;
  --c-gm4:        #2F4863;   /* tiefes Indigo, Weite */
  --c-gm4-50:     #E1E7EE;

  --c-methode:    #3F6B6B;   /* gedämpftes Petrol */
  --c-methode-50: #DEE9E9;
  --c-thema:      #6B4A6B;   /* gedämpftes Aubergine */
  --c-thema-50:   #ECE2EC;
  --c-stoerung:   #A65A3E;   /* warmes Terracotta */
  --c-stoerung-50:#F4E2D9;
  --c-praxis:     #4A6147;   /* moosgrün */
  --c-praxis-50:  #E2E8E1;
  --c-lernen:     #4D4060;   /* heather lila – Studium / Werkstatt */
  --c-lernen-50:  #E5E0EC;

  /* aktuelle Bereichsfarbe – per Body-Klasse überschrieben */
  --c-accent:     var(--c-anthro);
  --c-accent-50:  var(--c-anthro-50);

  /* -------- Typografie -------- */
  --font-sans: "Inter", "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-serif: "Source Serif Pro", "Crimson Pro", "IBM Plex Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs:    0.78rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.3rem;
  --fs-xl:    1.6rem;
  --fs-2xl:   2.1rem;
  --fs-3xl:   2.75rem;

  --lh-tight: 1.25;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  /* -------- Spacing & Layout -------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);

  --max-content: 760px;   /* Lesemaß für Fließtext */
  --max-wide:    1180px;  /* breite Layout-Grenze */

  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  400ms;
}

/* -------- Themes nach Bereich -------- */
body.area-anthro    { --c-accent: var(--c-anthro);   --c-accent-50: var(--c-anthro-50); }
body.area-gm1       { --c-accent: var(--c-gm1);      --c-accent-50: var(--c-gm1-50); }
body.area-gm2       { --c-accent: var(--c-gm2);      --c-accent-50: var(--c-gm2-50); }
body.area-gm3       { --c-accent: var(--c-gm3);      --c-accent-50: var(--c-gm3-50); }
body.area-gm4       { --c-accent: var(--c-gm4);      --c-accent-50: var(--c-gm4-50); }
body.area-methode   { --c-accent: var(--c-methode);  --c-accent-50: var(--c-methode-50); }
body.area-thema     { --c-accent: var(--c-thema);    --c-accent-50: var(--c-thema-50); }
body.area-stoerung  { --c-accent: var(--c-stoerung); --c-accent-50: var(--c-stoerung-50); }
body.area-praxis    { --c-accent: var(--c-praxis);   --c-accent-50: var(--c-praxis-50); }
body.area-lernen    { --c-accent: var(--c-lernen);   --c-accent-50: var(--c-lernen-50); }