/* ============================================================
   THÖMUS DESIGN SYSTEM — Colors & Typography
   Quelle: design-system/colors_and_type.css (verbindlich)
   Nur Pfade und font-display an diese Site angepasst.
   ============================================================ */

/* ── BRAND FONTS — Galano Grotesque ────────────────────────── */
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-Regular.otf')   format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-Medium.otf')    format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-SemiBold.otf')  format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-Bold.otf')      format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Galano Grotesque'; src: url('/assets/fonts/GalanoGrotesque-Heavy.otf')     format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --tho-red:          #E30613;
  --tho-red-dark:     #B5040F;
  --tho-red-light:    #FF1A27;
  --tho-red-deep:     #420101;   /* Hero-Fade-Endfarbe: gemessene Farbe am unteren Rand des Hero-Visuals */

  /* Neutrals */
  --tho-black:        #0D0D0D;
  --tho-gray-900:     #1A1A1A;
  --tho-gray-800:     #2A2A2A;
  --tho-gray-700:     #444444;
  --tho-gray-600:     #666666;
  --tho-gray-400:     #999999;
  --tho-gray-300:     #CCCCCC;
  --tho-gray-200:     #E5E5E5;
  --tho-gray-100:     #F5F5F5;
  --tho-white:        #FFFFFF;

  /* ── SEMANTIC COLOR VARS ─────────────────────────────────── */
  --color-bg:               var(--tho-white);
  --color-bg-dark:          var(--tho-black);
  --color-bg-subtle:        var(--tho-gray-100);
  --color-fg:               var(--tho-gray-900);
  --color-fg-subtle:        var(--tho-gray-600);
  --color-fg-muted:         var(--tho-gray-400);
  --color-fg-inverted:      var(--tho-white);
  --color-brand:            var(--tho-red);
  --color-brand-hover:      var(--tho-red-dark);
  --color-border:           var(--tho-gray-300);
  --color-border-strong:    var(--tho-gray-700);
  --color-divider:          var(--tho-gray-200);

  /* Interactive */
  --color-link:             var(--tho-red);
  --color-link-hover:       var(--tho-red-dark);
  --color-focus-ring:       rgba(227, 6, 19, 0.4);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display:   'Galano Grotesque', 'Arial Narrow', sans-serif;
  --font-body:      'Galano Grotesque', 'Helvetica Neue', Arial, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Type Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.5rem;
  --text-5xl:   5rem;
  --text-6xl:   7rem;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.12em;
  --ls-widest:  0.2em;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  --section-py:       var(--space-20);
  --section-py-lg:    var(--space-32);
  --content-max:      1400px;
  --content-gutter:   var(--space-12);

  /* ── SHAPE ───────────────────────────────────────────────── */
  --radius-none:  0px;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-pill:  999px;

  /* Durchgängiges Parallelogramm-Motiv: Neigung der schrägen Kante */
  --skew:         -12deg;
  --slant:        120px;

  /* ── ELEVATION / SHADOW ──────────────────────────────────── */
  --shadow-nav:   0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-card:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-none:  none;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}