/* Design-Tokens nach dem cnoss-Designsystem (Projekt „semantisches-differenzial“, public/css/tokens.css).
   Änderungen gegenüber dem Original: Barlow liegt lokal statt bei Google Fonts,
   und es gibt zusätzlich einen dunklen Modus.
   ------------------------------------------------------------------------ */

@font-face { font-family: "Barlow"; font-weight: 300; font-display: swap; src: url("../fonts/barlow-300.woff") format("woff"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff") format("woff"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff") format("woff"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff") format("woff"); }

:root {
  /* Skala: Lucas-Folge × 1.1 */
  --scaling-factor: 1.1;
  --size-xxs: calc(4px  * var(--scaling-factor));
  --size-xs:  calc(7px  * var(--scaling-factor));
  --size-s:   calc(11px * var(--scaling-factor));
  --size-m:   calc(18px * var(--scaling-factor));
  --size-l:   calc(29px * var(--scaling-factor));
  --size-xl:  calc(47px * var(--scaling-factor));

  /* Basisfarben */
  --color-pink:      #DD1166;
  --color-green:     #10CFA3;
  --color-blue:      #28C0DE;
  --color-darkblue:  #047A91;
  --color-light:     #E6DED1;
  --color-dark:      #57544F;
  --color-black:     #000;
  --color-white:     #fff;
  --color-lichtgrau: hsl(100deg 3% 77%);
  --color-hellgrau:  #BBBAB7;

  /* Rollen (im Code nur diese verwenden) */
  --interaction-color: var(--color-pink);
  --decoration-color:  var(--color-green);
  --font-layer-color:  var(--color-darkblue);
  --text-color:        var(--color-black);
  --text-muted-color:  var(--color-dark);
  --border-color:      var(--color-lichtgrau);
  --background-color:  var(--color-white);
  --surface-color:     color-mix(in oklab, var(--color-light) 45%, white);
  --stage-color:       var(--color-white);
  --glyph-color:       var(--color-black);

  /* Typografie */
  --font-family-sans: "Barlow", arial, sans-serif;
  --base-font-size:   1rem;
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  /* Rahmen, Radien, Schatten */
  --border-width:          2px;
  --border-width-hairline: 1px;
  --radius-xs: 3px;
  --radius-s:  0.5rem;
  --box-shadow: 0 0 20px rgb(0 0 0 / 10%);

  /* Bewegung */
  --tr-fast: 0.2s;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

/* Dunkler Modus: abgeleitet, nicht Teil des Designsystems.
   Pink und Dunkelblau werden aufgehellt, damit sie auf dunklem Grund AA-Kontrast halten. */
:root[data-theme="dark"] {
  --interaction-color: #F0457F;
  --font-layer-color:  var(--color-blue);
  --text-color:        var(--color-light);
  --text-muted-color:  var(--color-hellgrau);
  --border-color:      #4a4844;
  --background-color:  #1f1e1c;
  --surface-color:     #2a2926;
  --stage-color:       #141413;
  --glyph-color:       #F5F1EA;
  color-scheme: dark;
}