:root {

  /* ---------- FARBPALETTE ---------- */
  --red-light:        oklch(0.70 0.15 23);
  --red:              oklch(0.60 0.18 23);
  --red-dark:         oklch(0.50 0.14 23);

  --redish-gray-light: oklch(0.78 0.06 23);
  --redish-gray:       oklch(0.66 0.06 23);
  --redish-gray-dark:  oklch(0.54 0.06 23);


  --orange-light:        oklch(0.77 0.13 56);
  --orange:              oklch(0.69 0.15 56);
  --orange-dark:         oklch(0.59 0.13 56);

  --orangish-gray-light: oklch(0.78 0.06 56);
  --orangish-gray:       oklch(0.66 0.06 56);
  --orangish-gray-dark:  oklch(0.54 0.06 56);


  --yellow-light:        oklch(0.87 0.14 98);
  --yellow:              oklch(0.78 0.15 92);
  --yellow-dark:         oklch(0.67 0.14 88);

  --yellowish-gray-light: oklch(0.78 0.06 95);
  --yellowish-gray:       oklch(0.66 0.06 95);
  --yellowish-gray-dark:  oklch(0.54 0.06 95);


  --green-light:        oklch(0.79 0.10 148);
  --green:              oklch(0.70 0.11 148);
  --green-dark:         oklch(0.60 0.09 148);

  --greenish-gray-light: oklch(0.78 0.06 145);
  --greenish-gray:       oklch(0.66 0.06 145);
  --greenish-gray-dark:  oklch(0.54 0.06 145);


  --blue-light:        oklch(0.69 0.12 238);
  --blue:              oklch(0.57 0.14 244);
  --blue-dark:         oklch(0.45 0.10 246);

  --bluish-gray-light: oklch(0.78 0.06 250);
  --bluish-gray:       oklch(0.66 0.06 250);
  --bluish-gray-dark:  oklch(0.54 0.06 250);


  --purple-light:        oklch(0.73 0.12 285);
  --purple:              oklch(0.63 0.18 285);
  --purple-dark:         oklch(0.55 0.15 285);

  --purplish-gray-light: oklch(0.78 0.06 305);
  --purplish-gray:       oklch(0.66 0.06 305);
  --purplish-gray-dark:  oklch(0.54 0.06 305);


  --white:            oklch(1.00 0 0);
  --very-light-gray:  oklch(0.98 0.005 250);
  --light-gray:       oklch(0.90 0.008 250);
  --gray:             oklch(0.63 0 0);
  --dark-gray:        oklch(0.45 0 0);
  --very-dark-gray:   oklch(0.27 0 0);
  --black:            oklch(0 0 0);



  /* ---------- SHADOWS ---------- */
  --shadow-subtle:  0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-soft:    0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-raised:  0 6px 12px rgba(0, 0, 0, 0.15);
  --shadow-heavy:   0 10px 40px rgba(0, 0, 0, 0.3);



  /* ---------- TYPOGRAFIE ---------- */
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;



  /* ---------- Font-Size ---------- */
  --font-size-075:   0.75rem;
  --font-size-082:   0.82rem;
  --font-size-090: 	 0.90rem;
  --font-size-100:   1.00rem;
  --font-size-110:   1.10rem;
  --font-size-123:   1.25rem;
  --font-size-150:   1.50rem;
  --font-size-175:   1.75rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.4;
  --line-height-base:   1.6;
  --line-height-loose:  1.7;



  /* ---------- TRANSITIONS ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;



  /* ---------- Z-INDEX-SKALA ---------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    9999;
}



/* ---------- MARGINS ---------- */

.mright0    { margin-right: 0; }
.mright1    { margin-right: 1px; }
.mright2    { margin-right: 2px; }
.mright5    { margin-right: 5px; }
.mright10   { margin-right: 10px; }
.mright20   { margin-right: 20px; }
.mright30   { margin-right: 30px; }
.mright40   { margin-right: 40px; }
.mright50   { margin-right: 50px; }
.mright60   { margin-right: 60px; }
.mright70   { margin-right: 70px; }
.mright80   { margin-right: 80px; }
.mright90   { margin-right: 90px; }
.mright100  { margin-right: 100px; }
.mright150  { margin-right: 150px; }
.mright200  { margin-right: 200px; }

.mbottom0    { margin-bottom: 0; }
.mbottom1    { margin-bottom: 1px; }
.mbottom2    { margin-bottom: 2px; }
.mbottom5    { margin-bottom: 5px; }
.mbottom10   { margin-bottom: 10px; }
.mbottom20   { margin-bottom: 20px; }
.mbottom30   { margin-bottom: 30px; }
.mbottom40   { margin-bottom: 40px; }
.mbottom50   { margin-bottom: 50px; }
.mbottom60   { margin-bottom: 60px; }
.mbottom70   { margin-bottom: 70px; }
.mbottom80   { margin-bottom: 80px; }
.mbottom90   { margin-bottom: 90px; }
.mbottom100  { margin-bottom: 100px; }
.mbottom150  { margin-bottom: 150px; }
.mbottom200  { margin-bottom: 200px; }

.mleft0    { margin-left: 0; }
.mleft1    { margin-left: 1px; }
.mleft2    { margin-left: 2px; }
.mleft5    { margin-left: 5px; }
.mleft10   { margin-left: 10px; }
.mleft20   { margin-left: 20px; }
.mleft30   { margin-left: 30px; }
.mleft40   { margin-left: 40px; }
.mleft50   { margin-left: 50px; }
.mleft60   { margin-left: 60px; }
.mleft70   { margin-left: 70px; }
.mleft80   { margin-left: 80px; }
.mleft90   { margin-left: 90px; }
.mleft100  { margin-left: 100px; }
.mleft150  { margin-left: 150px; }
.mleft200  { margin-left: 200px; }

.mright0    { margin-right: 0; }
.mright1    { margin-right: 1px; }
.mright2    { margin-right: 2px; }
.mright5    { margin-right: 5px; }
.mright10   { margin-right: 10px; }
.mright20   { margin-right: 20px; }
.mright30   { margin-right: 30px; }
.mright40   { margin-right: 40px; }
.mright50   { margin-right: 50px; }
.mright60   { margin-right: 60px; }
.mright70   { margin-right: 70px; }
.mright80   { margin-right: 80px; }
.mright90   { margin-right: 90px; }
.mright100  { margin-right: 100px; }
.mright150  { margin-right: 150px; }
.mright200  { margin-right: 200px; }



/* ---------- PADDINGS ---------- */

.ptop0   { padding-top: 0; }
.ptop5   { padding-top: 5px; }
.ptop10  { padding-top: 10px; }
.ptop20  { padding-top: 20px; }
.ptop25  { padding-top: 25px; }
.ptop30  { padding-top: 30px; }

.pbottom0   { padding-bottom: 0; }
.pbottom5   { padding-bottom: 5px; }
.pbottom10  { padding-bottom: 10px; }
.pbottom20  { padding-bottom: 20px; }
.pbottom25  { padding-bottom: 25px; }
.pbottom30  { padding-bottom: 30px; }

.pleft0   { padding-left: 0; }
.pleft5   { padding-left: 5px; }
.pleft10  { padding-left: 10px; }
.pleft20  { padding-left: 20px; }
.pleft25  { padding-left: 25px; }
.pleft30  { padding-left: 30px; }

.pright0   { padding-right: 0; }
.pright5   { padding-right: 5px; }
.pright10  { padding-right: 10px; }
.pright20  { padding-right: 20px; }
.pright25  { padding-right: 25px; }
.pright30  { padding-right: 30px; }



/* ---------- BORDER-RADIUS ---------- */

.r2    { border-radius: 2px; }
.r4    { border-radius: 4px; }
.r5    { border-radius: 5px; }
.r8    { border-radius: 8px; }
.r10   { border-radius: 10px; }
.r14   { border-radius: 14px; }
.rfull { border-radius: 50%; }