/* ============================================================
   ELANUM Tokens 4.5
   Eine Quelle für Atlas und Elemente. Der kopierbare Tokenblock im
   Atlas (Kapitel Assets & Tokens) zeigt dieselben Werte.
   ============================================================ */

@font-face{font-family:"Albert Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/AlbertSans-Latin.woff2) format("woff2")}
@font-face{font-family:Yrsa;font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/Yrsa-Latin.woff2) format("woff2")}

:root{
  /* Fläche und Schrift */
  --canvas:#F0ECE3;
  --paper:#F6F1E7;
  --ink:#16363B;
  --ink-2:#3D5055;          /* Sekundärtext, 7,2:1 auf Canvas */
  --line:#D3CDC0;
  --offen:#E5E0D6;          /* Offene Elemente im Rad: grau, --ink-2 darauf 6,4:1 */

  /* Drei Bereiche des Resonanzrads, ausgeglichen: gleiche Helligkeit
     (OKLCH L 0.46 / 0.864 / 0.94), Sättigung pro Farbton angeglichen.
     tief: Schrift, Chips, weisser Text darauf · flaeche: ausgefüllte Elemente,
     eine Farbe für alle drei Elemente eines Bereichs, Ink darauf mind. 8,4:1
     (keine Nuancen: Helligkeit würde als Menge gelesen) · hauch: Ring, Flächen
     hinter Ink-Text. Offene Elemente tragen --offen. */
  --sterne-tief:#59479A; --sterne-flaeche:#D1CDF4; --sterne-hauch:#EFEEFE;   /* Sterne & Ursprung, Violett */
  --ich-tief:#8E3931;   --ich-flaeche:#EFC8C1;   --ich-hauch:#FFEBE7;     /* Ich & Orientierung, Koralle */
  --bezug-tief:#006868; --bezug-flaeche:#B8DADA; --bezug-hauch:#E3F4F4;   /* Beziehung & Verbindung, Petrol */

  /* Verläufe. Die Farbstopps stehen als kommaseparierte Liste darunter,
     so lassen sie sich in jedes Werkzeug kopieren. */
  --spectrum-stops:#6756D9, #4D7FE8, #9466DF, #D85BA9, #F0719A;          /* Markenspektrum: Zeichen, Verbindung */
  --spectrum:linear-gradient(110deg,var(--spectrum-stops));
  --bridge-stops:#6756D9, #D85BA9;                                         /* Verbindung zwischen zwei Menschen */
  --edge-stops:#6756D9, #4D7FE8, #9466DF, #D85BA9, #F0719A, #6756D9;       /* Glührand: geschlossener Kreis */
  --glow:0 10px 30px -8px #6756D966,0 0 24px -6px #D85BA959;               /* Glühen unter aktiven Flächen */

  /* Status: immer Zeichen, Balken und Text, nie nur Farbe */
  --info:#2863AB;    --info-bg:#E5F1FF;
  --hint:#875500;    --hint-bg:#FBEEDF;
  --error:#B02A2D;   --error-bg:#FFEAE8;
  --success:#2B7440; --success-bg:#E5F5E7;

  /* Typografie: fünf Stufen. Yrsa nur gross, Albert Sans trägt die Bedienung. */
  --display-font:Yrsa,Georgia,serif;
  --ui-font:"Albert Sans",system-ui,sans-serif;
  --type-display:400 clamp(52px,7vw,96px)/1 var(--display-font);
  --type-title:400 clamp(32px,3.6vw,48px)/1.1 var(--display-font);
  --type-heading:600 clamp(20px,1.6vw,22px)/1.3 var(--ui-font);
  --type-body:400 clamp(17px,1.25vw,18px)/1.6 var(--ui-font);
  --type-label:500 15px/1.4 var(--ui-font);

  /* Raum */
  --gutter:clamp(24px,6vw,96px);
  --section:clamp(96px,12vw,160px);
  --content:1120px;
  --measure:62ch;

  /* Form und Relief: Licht von links oben */
  --radius-control:12px;
  --radius-button:16px;
  --radius-surface:28px;
  --raised:9px 9px 22px #C9C3B680,-9px -9px 22px #FFFFFFC9;
  --paper-shadow:6px 8px 22px #C4BDAF80,-3px -3px 8px #FFFFFFB3;     /* Papier: ruhiger als --raised */
  --raised-sm:4px 4px 10px #C4BDAF99,-4px -4px 10px #FFFFFFD9;
  --pressed:inset 5px 5px 12px #C8C1B580,inset -5px -5px 12px #FFFFFFE0;

  /* Linien: ein System für Rad, Umfeld, Weg und Tageslinie */
  --trace:1.6px;
  --bridge:2.8px;

  /* Bewegung */
  --ease:cubic-bezier(.23,1,.32,1);
  --motion-ui:180ms;
  --motion-reveal:900ms;
  --motion-breath:7800ms;
}