/* ============================================================
   THÖMUS DESIGN SYSTEM — Colors & Typography
   Source: www.thoemus.ch | Built: 2026-04
   ============================================================ */

/* ── BRAND FONTS — Galano Grotesque ────────────────────────── */
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Light.otf') format('opentype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-ThinItalic.otf') format('opentype'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-ExtraLightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-ExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-HeavyItalic.otf') format('opentype'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-BlackItalic.otf') format('opentype'); font-weight: 950; font-style: italic; }

/* ============================================================
   BASE COLOR TOKENS
   ============================================================ */
:root {
  /* Brand */
  --tho-red:          #E30613;
  --tho-red-dark:     #B5040F;
  --tho-red-light:    #FF1A27;

  /* Neutrals */
  --tho-black:        #0D0D0D;
  --tho-gray-900:     #1A1A1A;
  --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;

  /* Weight aliases */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* Type Scale (mobile-first, rem) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3.5rem;     /*  56px */
  --text-5xl:   5rem;       /*  80px */
  --text-6xl:   7rem;       /* 112px */

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

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

  /* ── 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 padding */
  --section-py:       var(--space-20);
  --section-py-lg:    var(--space-32);
  --content-max:      1400px;
  --content-gutter:   var(--space-6);

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

  /* ── 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); /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-base:   250ms; /* @kind other */
  --duration-slow:   400ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--tho-red);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }