:root {
  /* ==========================================================================
     Spacing Scale
     ========================================================================== */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* ==========================================================================
     Layout & Border Radius
     ========================================================================== */
  --max-container: 1400px;

  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-family-base: "Roboto Condensed", "Roboto Condensed Fallback", Arial, Helvetica, sans-serif;
  
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Font Sizes (in rem, basierend auf 16px Root-Size) */
  --font-size-xs: 0.83125rem; /* 13.3px */
  --font-size-normal: 1rem;   /* 16.0px */
  --font-size-h6: 1.2rem;     /* 19.2px */
  --font-size-h5: 1.4375rem;  /* 23.0px */
  --font-size-h4: 1.725rem;   /* 27.6px */
  --font-size-h3: 2.075rem;   /* 33.2px */
  --font-size-h2: 2.4875rem;  /* 39.8px */
  --font-size-h1: 2.9875rem;  /* 47.8px */

  /* Relative Line-Heights (einheitenlos) */
  --lh-paragraph: 1.5;
  --lh-h6: 1.5;
  --lh-heading: 1.25;

  /* ==========================================================================
     Colors
     ========================================================================== */
  /* Primary */
  --color-primary-100: #002293;
  --color-primary-75: #405AAE;
  --color-primary-50: #8091C9;

  /* Snackys primary buttons → theme primary */
  --btn-pr-b: var(--color-primary-100);
  --btn-pr-b-h: var(--color-primary-75);
  --btn-pr-r: var(--color-primary-100);
  --btn-pr-r-h: var(--color-primary-75);
  --btn-pr-t: var(--color-white);
  --btn-pr-t-h: var(--color-white);

  /* Secondary */
  --color-secondary-100: #E3E4E8;
  --color-secondary-75: #EAEBF0;
  --color-secondary-50: #F1F2F4;

  /* Tertiary */
  --color-tertiary-100: #9BA8D5;
  --color-tertiary-75: #D4D6DD;
  --color-tertiary-50: #E3E4E8;

  /* Ink / color swatches */
  --color-ink-black: #242424;
  --color-ink-cyan: #1aa3e8;
  --color-ink-magenta: #FF0059;
  --color-ink-yellow: #FFAE00;
  --color-ink-yellow-text: #242424;
  --color-ink-blue: #9261dc;
  --color-ink-orange: #f26522;
  --color-ink-red: #d32f2f;
  --color-ink-green: #2e7d32;
  --color-ink-grey: #8a8a8a;
  --color-ink-dark-grey: #4a4a4a;
  --color-ink-light-grey: #96A9D7;
  --color-ink-light-cyan: #8ed8f5;
  --color-ink-light-cyan-text: #16324a;
  --color-ink-light-magenta: #f4a8cc;
  --color-ink-light-magenta-text: #5a1638;
  --color-ink-light-yellow: #ffe566;
  --color-ink-photo-cyan: #0b7fb8;
  --color-ink-photo-magenta: #b01058;
  --color-ink-photo-black: #111218;
  --color-ink-photo-blue: #2D54AF;
  --color-ink-matte-black: #3a3a3a;
  --color-ink-silver: #8a8a8a;
  --color-ink-gloss: #8a8a8a;

  /* Legacy alias */
  --color-cyan: var(--color-ink-cyan);

  /* Neutrals & Feedback */
  --color-neutral: #242424;
  --color-warning: #FFAE00;
  --color-success: #00B831;
  --color-success-hover: #009b2a;
  --color-success-soft: #e5f7ea;
  --color-success-text: #00671c;
  --color-danger: #FF0059;
  --color-danger-hover: color-mix(in srgb, var(--color-danger) 82%, #000000);
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 10%, #ffffff);
  --color-danger-soft-strong: color-mix(in srgb, var(--color-danger) 24%, #ffffff);

  /* Basic UI Colors */
  --color-white: #ffffff;
  --color-bg-body: #ffffff;
  --color-bg-surface: var(--color-tertiary-50);
  --color-bg-gallery: #f7f7f7;

  /* ==========================================================================
     Elevations & Shadows
     ========================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ==========================================================================
     Transitions & Layering
     ========================================================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1050;
}