:root {
  /* Farben */
  --boows-col-primary: #dfb843;
  --boows-col-primary-rgb: 223, 184, 67;

  --boows-col-secondary: #278782;
  --boows-col-accent: #d3d4d4;

  --boows-col-bg: #f6f8f9;
  --boows-col-text: #222;
  --boows-col-text-rgb: 34, 34, 34;

  --boows-col-text-80: #55585a; 
  --boows-col-text-60: #888d91; 
  --boows-col-text-40: #bbbfc2; 
  --boows-col-text-20: #dde2e6; 
  --boows-col-text-10: #e8eef1; 
  --boows-col-text-5:  #f3f7f9;

  --boows-col-bg-light: #F5F5DC;

  /* Primary Abstufungen */
  --boows-col-primary-80: #e4c25f;
  --boows-col-primary-60: #e9cd7b;
  --boows-col-primary-40: #eed897;
  --boows-col-primary-20: #f3e3b3;
  --boows-col-primary-10: #f9f1d9;

  /* Accent Abstufungen */
  --boows-col-accent-80: #d9d9d9;
  --boows-col-accent-60: #e0e0e0;
  --boows-col-accent-40: #e8e8e8;
  --boows-col-accent-20: #f0f0f0;
  --boows-col-accent-10: #f8f8f8;

  /* Error */
  --boows-col-error: #c83636;
  --boows-col-error-rgb: 200, 54, 54;
  --boows-col-error-20: #f4d7d7;

  /* Success */
  --boows-col-success: #36c85f;
  --boows-col-success-rgb: 54, 200, 95;
  --boows-col-success-20: #d7f4df;

  /* Attention */
  --boows-col-attention: #f0a227;
  --boows-col-attention-rgb: 217, 142, 24;
  --boows-col-attention-20: #fcecd4;

  /* ℹInfo */
  --boows-col-info-rgb: 232, 191, 47;

  /* Typografie */
  --boows-font: 'Outfit', 'Segoe UI', sans-serif;
  --boows-font-size-base: 1rem;   /* 16px */
  --boows-font-size-sm: 0.875rem; /* 14px */
  --boows-font-size-lg: 1.125rem; /* 18px */

  /* Spacing Scale */
  --boows-space-0: 0.25rem; /* 4px */
  --boows-space-1: 0.5rem;  /* 8px */
  --boows-space-2: 0.75rem; /* 12px */
  --boows-space-3: 1rem;    /* 16px */
  --boows-space-4: 1.25rem; /* 20px */
  --boows-space-5: 1.5rem;  /* 24px */
  --boows-space-6: 2rem;    /* 32px */
  --boows-space-7: 2.5rem;  /* 40px */
  --boows-space-8: 3rem;    /* 48px */

  /* Layout & Container */
  --boows-radius: 1rem; /* Capsule-Style */
  --boows-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08);

  /* Transition */
  --boows-transition: all 0.2s ease-in-out;

  /* Input Defaults */
  --boows-input-height: 3rem; /* 48px */
  --boows-input-padding-y: 0.5rem;  /* 8px */
  --boows-input-padding-x: 0.75rem; /* 12px */
  --boows-input-border: #ccc;
  --boows-input-bg: #fff;
  --boows-input-radius: 1rem; /* Capsule */
  --boows-button-radius: 9999px;
}

/* === Global === */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--boows-font);
  font-size: var(--boows-font-size-base);
  background: var(--boows-col-bg);
  color: var(--boows-col-text);
}

/* Utilities */
.hide { display: none !important; }
.pointer { cursor: pointer; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }

.rounded { border-radius: var(--boows-radius); }
.shadow { box-shadow: var(--boows-shadow); }

.success-color { color: var(--boows-col-success); }
.error-color { color: var(--boows-col-error); }
.attention-color { color: var(--boows-col-attention); }

/* Links */
a {
  color: var(--boows-col-primary);
  text-decoration: none;
  transition: color var(--boows-transition);
}
a:hover {
  color: var(--boows-col-primary-80);
}