/* ============================================================
   MUSIKSCHULE UNGEHEUER — Design System
   ============================================================
   Farbkonzept basiert auf den E-Gitarren:
   - Fender Stratocaster "Mystic Surf Green"
   - Gibson Les Paul "Ocean Blue"
   ============================================================ */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/ebgaramond-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/ebgaramond-italic.woff2') format('woff2');
}

:root {
  /* ----------------------------------------------------------
     FARBEN — Primär (abgeleitet von den Gitarrenfarben)
     ---------------------------------------------------------- */
  --color-ocean-blue:         #4A7B9D;
  --color-ocean-blue-light:   #6A9BBD;
  --color-ocean-blue-lighter: #E8F1F7;
  --color-ocean-blue-dark:    #2E5F7E;
  --color-ocean-blue-deep:    #1A3D54;

  --color-surf-green:         #7BA07A;
  --color-surf-green-light:   #9DBFA0;
  --color-surf-green-lighter: #EAF3EA;
  --color-surf-green-dark:    #5A7E5A;
  --color-surf-green-deep:    #3A5C3A;

  /* ----------------------------------------------------------
     FARBEN — Neutral
     ---------------------------------------------------------- */
  --color-white:              #FFFFFF;
  --color-off-white:          #FAFAF8;
  --color-cream:              #F5F3EE;
  --color-warm-gray-100:      #EDEBE6;
  --color-warm-gray-200:      #D9D5CC;
  --color-warm-gray-300:      #B8B2A6;
  --color-warm-gray-400:      #8C8578;
  --color-warm-gray-500:      #6B6459;
  --color-warm-gray-600:      #4A453C;
  --color-charcoal:           #2C2824;
  --color-near-black:         #1A1714;

  /* ----------------------------------------------------------
     FARBEN — Holz (warme Akustikgitarren-Toene)
     ---------------------------------------------------------- */
  --color-wood:               #C49A6C;
  --color-wood-light:         #D4B48C;
  --color-wood-lighter:       #F5EDE3;
  --color-wood-dark:          #A07A4E;
  --color-wood-deep:          #7A5A38;

  /* ----------------------------------------------------------
     FARBEN — Akzent & Funktion
     ---------------------------------------------------------- */
  --color-gold:               #C4A35A;
  --color-gold-light:         #E8D5A0;
  --color-error:              #C45A5A;
  --color-success:            #5A8C5A;

  /* ----------------------------------------------------------
     FARBEN — Semantisch (einfach änderbar)
     ---------------------------------------------------------- */
  --color-primary:            var(--color-ocean-blue);
  --color-primary-light:      var(--color-ocean-blue-light);
  --color-primary-lighter:    var(--color-ocean-blue-lighter);
  --color-primary-dark:       var(--color-ocean-blue-dark);

  --color-secondary:          var(--color-surf-green);
  --color-secondary-light:    var(--color-surf-green-light);
  --color-secondary-lighter:  var(--color-surf-green-lighter);
  --color-secondary-dark:     var(--color-surf-green-dark);

  --color-bg:                 var(--color-off-white);
  --color-bg-alt:             var(--color-cream);
  --color-text:               var(--color-charcoal);
  --color-text-light:         var(--color-warm-gray-500);
  --color-text-muted:         var(--color-warm-gray-400);
  --color-border:             var(--color-warm-gray-200);
  --color-border-light:       var(--color-warm-gray-100);

  /* ----------------------------------------------------------
     TYPOGRAFIE
     ---------------------------------------------------------- */
  /* Schriftfamilien laut Vorgabe */
  --font-heading:             'Times New Roman', 'Georgia', 'Palatino', serif;
  --font-subheading:          'Garamond', 'EB Garamond', 'Georgia', serif;
  --font-body:                'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* Schriftgrößen — Fluid Scale (clamp) */
  --text-xs:                  clamp(0.78rem, 0.72rem + 0.25vw, 0.85rem);
  --text-sm:                  clamp(0.88rem, 0.82rem + 0.25vw, 0.95rem);
  --text-base:                clamp(1.05rem, 0.98rem + 0.25vw, 1.1rem);
  --text-md:                  clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);
  --text-lg:                  clamp(1.3rem, 1.1rem + 1vw, 1.55rem);
  --text-xl:                  clamp(1.6rem, 1.3rem + 1.5vw, 2.05rem);
  --text-2xl:                 clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  --text-3xl:                 clamp(2.3rem, 1.7rem + 3vw, 3.4rem);
  --text-4xl:                 clamp(2.7rem, 1.9rem + 4vw, 4.2rem);

  /* Zeilenhöhen */
  --leading-tight:            1.2;
  --leading-snug:             1.35;
  --leading-normal:           1.6;
  --leading-relaxed:          1.75;

  /* Zeichenabstand */
  --tracking-tight:          -0.02em;
  --tracking-normal:          0;
  --tracking-wide:            0.04em;
  --tracking-wider:           0.08em;

  /* Schriftstärken */
  --weight-normal:            400;
  --weight-medium:            500;
  --weight-semibold:          600;
  --weight-bold:              700;

  /* ----------------------------------------------------------
     ABSTÄNDE — Spacing Scale
     ---------------------------------------------------------- */
  --space-2xs:                0.25rem;   /*  4px */
  --space-xs:                 0.5rem;    /*  8px */
  --space-sm:                 0.75rem;   /* 12px */
  --space-md:                 1rem;      /* 16px */
  --space-lg:                 1.5rem;    /* 24px */
  --space-xl:                 2rem;      /* 32px */
  --space-2xl:                3rem;      /* 48px */
  --space-3xl:                4rem;      /* 64px */
  --space-4xl:                6rem;      /* 96px */
  --space-5xl:                8rem;      /* 128px */

  /* Sektionsabstände (responsive) */
  --section-padding-y:        clamp(3rem, 2rem + 5vw, 7rem);
  --section-padding-x:        clamp(1rem, 0.5rem + 4vw, 3rem);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-max:            1200px;
  --container-narrow:         800px;
  --container-wide:           1400px;
  --content-max:              65ch;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:                4px;
  --radius-md:                8px;
  --radius-lg:                12px;
  --radius-xl:                20px;
  --radius-full:              9999px;

  /* ----------------------------------------------------------
     SCHATTEN
     ---------------------------------------------------------- */
  --shadow-sm:                0 1px 3px rgba(44, 40, 36, 0.06);
  --shadow-md:                0 4px 12px rgba(44, 40, 36, 0.08);
  --shadow-lg:                0 8px 30px rgba(44, 40, 36, 0.10);
  --shadow-xl:                0 16px 50px rgba(44, 40, 36, 0.12);
  --shadow-inner:             inset 0 2px 6px rgba(44, 40, 36, 0.06);

  /* ----------------------------------------------------------
     ÜBERGÄNGE
     ---------------------------------------------------------- */
  --transition-fast:          150ms ease;
  --transition-base:          250ms ease;
  --transition-slow:          400ms ease;
  --transition-slower:        600ms ease;

  /* ----------------------------------------------------------
     Z-INDEX Skala
     ---------------------------------------------------------- */
  --z-behind:                -1;
  --z-base:                   0;
  --z-above:                  10;
  --z-header:                 100;
  --z-overlay:                200;
  --z-modal:                  300;

  /* ----------------------------------------------------------
     BREAKPOINTS (nur als Referenz — in Media Queries nutzen)
     ---------------------------------------------------------- */
  /* Mobile:         < 480px   */
  /* Tablet:         480–768px */
  /* Tablet Large:   768–900px */
  /* Tablet XL:      900–1024px (iPad Pro, Surface) */
  /* Desktop:        > 1024px  */
}