/* Kopie aus dem teamzone Design System (Prototyp, tokens/), Stand 2026-10-20. Nicht hier ändern — Abweichungen gehören in sass/site.scss. */
/* ============================================================
   teamzone — Spacing, sizing & radius tokens
   Base scale extracted from tz_sizes Figma collection (px).
   ============================================================ */

:root {
  /* ---- Base size scale (px) ---- */
  --size-1:   4px;
  --size-2:   8px;
  --size-3:   12px;
  --size-4:   16px;
  --size-4-5: 18px;
  --size-5:   20px;
  --size-6:   24px;
  --size-7:   28px;
  --size-8:   32px;
  --size-10:  40px;
  --size-12:  48px;
  --size-14:  56px;
  --size-16:  64px;
  --size-18:  72px;
  --size-20:  80px;
  --size-30:  120px;

  /* ---- Spacing (semantic) ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ---- Radius (semantic) ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 48px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-chrome: 12px;   /* rounded-square chrome icon buttons */

  /* ---- Control sizing (globals/values.dart) ---- */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;

  /* Icon buttons: size / icon — globalIconButtonSize* */
  --iconbtn-lg: 48px;   --iconbtn-lg-icon: 24px;
  --iconbtn-md: 36px;   --iconbtn-md-icon: 20px;  /* "small" */
  --iconbtn-sm: 32px;   --iconbtn-sm-icon: 18px;  /* "tiny" */

  /* Squircle (avatars / logo / nav) — globalSquircleSize* */
  --squircle-sm: 40px;
  --squircle-md: 48px;
  --squircle-lg: 56px;

  /* Navigation rail — globalNavBarDimension */
  --rail-width:        80px;
  --rail-width-mobile: 64px;
  --rail-item:         80px;
  --rail-accent-width: 5px;   /* active tertiary bar */

  /* App-shell columns — globals/values.dart */
  --sidebar-width:       360px;  /* globalSidebarWidth */
  --sidebar-width-small: 320px;
  --content-min:  400px;
  --content-max:  800px;
  --content-max-xl:  960px;
  --content-max-xxl: 1120px;

  /* List tiles — globalTileMinHeight* */
  --tile-h-tiny:  28px;
  --tile-h-sm:    32px;
  --tile-h:       48px;
  --tile-h-land:  64px;

  /* Button group heights / radii (button_group.dart + Uplift-Stufe medium, CB-010) */
  --btngroup-h-standard: 48px;  --btngroup-r-standard: 16px;
  --btngroup-h-medium:   40px;  --btngroup-r-medium:   14px;
  --btngroup-h-small:    32px;  --btngroup-r-small:    12px;
}