/* cnoss Thesis Design Tokens
   Quelle: https://cnoss.github.io/thesis/  (assets/styles/variables.css)
   Namen bereinigt und vereinheitlicht; Originalnamen stehen als Alias darunter.
   Nur helles Theme. Schrift: Barlow (Google Fonts).
   ------------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,200,0,-25&display=swap");

:root {
  /* Skala: Lucas-Folge × 1.1 (Verhältnis ≈ 1,618) */
  --scaling-factor: 1.1;
  --size-xxs: calc(4px  * var(--scaling-factor));   /*  4.4px */
  --size-xs:  calc(7px  * var(--scaling-factor));   /*  7.7px */
  --size-s:   calc(11px * var(--scaling-factor));   /* 12.1px */
  --size-m:   calc(18px * var(--scaling-factor));   /* 19.8px */
  --size-l:   calc(29px * var(--scaling-factor));   /* 31.9px */
  --size-xl:  calc(47px * var(--scaling-factor));   /* 51.7px */
  --size-xxl: calc(76px * var(--scaling-factor));   /* 83.6px */

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

  /* Overlays */
  --color-lighten:        rgb(255 255 255 / 20%);
  --color-lighten-strong: rgb(255 255 255 / 50%);
  --color-darken-faint:   rgb(0 0 0 / 3%);
  --color-darken-light:   rgb(20 20 0 / 5%);
  --color-darken:         rgb(0 0 0 / 20%);
  --color-darken-strong:  rgb(0 0 0 / 70%);
  --color-backdrop:       rgb(0 0 0 / 95%);

  /* Rollen (immer diese im Code verwenden, nicht die Basisfarben) */
  --interaction-color:   var(--color-pink);
  --decoration-color:    var(--color-green);
  --icon-color:          var(--color-blue);
  --text-color:          var(--color-black);
  --text-muted-color:    var(--color-dark);
  --headline-color:      var(--color-darkblue);
  --headline-color-light:var(--color-steingrau);
  --site-title-color:    var(--color-green);
  --border-color:        var(--color-lichtgrau);
  --separator-color:     var(--color-light);
  --background-color:    var(--color-white);
  --surface-band-color:  var(--color-light);
  --surface-dark-color:  var(--color-dark);
  --footer-bg-color:     var(--color-black);
  --quote-accent-color:  var(--color-yellow);

  /* Typografie */
  --font-family-sans:  "Barlow", arial, sans-serif;
  --font-family-serif: "PT Serif", georgia, serif;   /* deklariert, ungenutzt */
  --font-icons:        "Material Symbols Outlined", "Material Icons";
  --base-font-size:    var(--size-m);

  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  --lh-tight:   110%;
  --lh-default: 130%;
  --lh-loose:   150%;

  /* Rahmen, Radien, Schatten */
  --border-width:        2px;
  --border-width-hairline: 1px;
  --border-width-accent: 3px;
  --radius-xs:    3px;
  --radius-s:     0.5rem;
  --radius-round: 50%;
  --box-shadow:  0 0 20px rgb(0 0 0 / 10%);
  --shadow-m:    0 0 10px rgb(0 0 0 / 20%);
  --text-shadow: 0 0 20px rgb(0 0 0 / 90%);
  --op-medium: 0.6;

  /* Bewegung */
  --tr-fast:   0.2s;
  --tr-link:   0.3s;
  --tr-accordion: 0.5s;
  --tr-medium: 0.6s;
  --tr-slow:   1s;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --max-width-content:   50rem;
  --aside-width:         20rem;
  --size-image-thumbnail:12.5rem;
  /* Breakpoints (nur als Referenz, in Media Queries literal schreiben):
     40rem Haupt-Breakpoint · 32rem Kartengrid · 100rem Zweispalter */

  /* Aliase für Kompatibilität mit dem Original */
  --color-lightest: var(--color-white);
  --color-darker:   var(--color-black);
  --color-darkest:  var(--color-black);
  --aside-color:    var(--color-lichtgrau);
  --seperator-color:var(--separator-color);
  --bw:             var(--border-width);
}