/* ==========================================================================
   MKS Design System — CSS Custom Properties
   Musikschule St. Poelten
   ========================================================================== */

:root {
  /* ---- Farben / Colors ---- */
  --mks-primary: #d11317;
  --mks-primary-hover: #b01115;
  --mks-text: #333333;
  --mks-text-dark: #0f262b;
  --mks-bg: #fdfdfd;
  --mks-bg-light: #f5f5f5;
  --mks-bg-medium: #f1f1f1;
  --mks-overlay-dark: rgba(0, 0, 0, 0.8);
  --mks-white: #fdfdfd;

  /* Grautöne / Grays */
  --mks-gray-light: #f5f5f5;
  --mks-gray-medium: #e0e0e0;
  --mks-gray-dark: #555555;

  /* Borders */
  --mks-border-light: #f1f1f1;
  --mks-border-input: #22252854;
  --mks-border-event: #e9e9ea;
  --mks-border-text: rgba(51, 51, 51, 0.14);

  /* Schatten / Shadows */
  --mks-shadow: 3px 3px 2px rgba(15, 38, 43, 0.2);
  --mks-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
  --mks-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --mks-shadow-heavy: 6px 7px 17px -2px rgba(0, 0, 0, 0.32);
  --mks-shadow-large: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* Akzentfarben / Accent Colors */
  --mks-accent-yellow: #fed700;
  --mks-accent-pink: #ba1a63;
  --mks-accent-blue: #2082a8;
  --mks-success: #10b981;
  --mks-warning: #f59e0b;
  --mks-danger: #dc2626;
  --mks-danger-hover: #b91c1c;

  /* Transparente Hintergründe / Transparent Backgrounds */
  --mks-nav-bg: rgba(255, 255, 255, 0.94);
  --mks-table-row-even: #c6c6cd40;
  --mks-table-row-hover: #c6c6cd;

  /* ---- Typografie / Typography ---- */
  --mks-font: 'jaf-bernina-sans-condensed', sans-serif;

  /* Font Sizes — Headings */
  --mks-font-size-h1: 2.3rem;
  --mks-font-size-h2: 2.1rem;
  --mks-font-size-h3: 2rem;
  --mks-font-size-h4: 1.5rem;

  /* Font Sizes — Body / UI */
  --mks-font-size-body: 1.3rem;
  --mks-font-size-nav: 1.6rem;
  --mks-font-size-nav-link: 1.3rem;
  --mks-font-size-small: 1.1rem;
  --mks-font-size-input: 18px;
  --mks-font-size-overlay: 25px;

  /* Responsive Font Overrides (reference values) */
  --mks-font-size-h1-mobile: 1.7rem;
  --mks-font-size-body-mobile: 1.1rem;
  --mks-font-size-overlay-mobile: 22px;
  --mks-font-size-h1-tablet: 28px;
  --mks-font-size-body-tablet: 20px;

  /* Line Heights */
  --mks-line-height: 1.8rem;
  --mks-line-height-mobile: 1.5rem;
  --mks-line-height-tablet: 30px;
  --mks-line-height-table: 34px;

  /* Font Weights */
  --mks-font-weight-light: 300;
  --mks-font-weight-normal: 400;
  --mks-font-weight-medium: 500;
  --mks-font-weight-bold: 600;

  /* ---- Spacing ---- */
  --mks-container-width: 90%;
  --mks-container-width-mobile: 93%;
  --mks-container-padding: 15px;
  --mks-text-padding: 5%;
  --mks-footer-margin: 5rem;

  /* ---- Navigation ---- */
  --mks-nav-height: 5.8rem;
  --mks-nav-height-mobile: 4rem;
  --mks-nav-height-scrolled: 4rem;
  --mks-logo-height: 3.3rem;
  --mks-logo-height-mobile: 3rem;
  --mks-logo-height-scrolled: 2.4rem;
  --mks-logo-max-width: 16rem;

  /* ---- Layout ---- */
  --mks-max-width: 1800px;
  --mks-banner-height: 400px;
  --mks-banner-height-mobile: 240px;
  --mks-banner-border-radius: 0 0 12px 12px;

  /* ---- Transitions ---- */
  --mks-transition: all 0.3s ease;
  --mks-transition-fast: all 0.2s ease;
  --mks-transition-slow: all 0.5s ease;

  /* ---- Border Radius ---- */
  --mks-border-radius: 8px;
  --mks-border-radius-large: 12px;

  /* ---- Z-Index Scale ---- */
  --mks-z-header: 2;
  --mks-z-nav: 100;
  --mks-z-overlay: 101;
  --mks-z-dropdown: 111;
  --mks-z-modal: 999;
  --mks-z-navbar-fixed: 1000;

  /* ---- Breakpoints (reference only, not usable in var()) ---- */
  /* Desktop full:      > 1340px */
  /* Desktop compact:   > 1200px */
  /* Tablet:            > 1120px */
  /* Tablet/Mobile Nav: 820px    */
  /* Mobile Layout:     771px    */
  /* Small Mobile:      700px    */
  /* Mini-Logo:         545px    */
  /* Extra-small:       480px    */
}