/* ============================================================
   Massagesessel Welt — Design-Tokens für das Partnerportal
   Quelle: Claude-Design-Projekt "Massagesessel Welt Design System"
   (tokens/colors.css, tokens/typography.css, tokens/layout.css)
   Rubik wird von Google Fonts geladen (identische Familie wie im CI).
   ============================================================ */
/* Rubik liegt hier im Portal statt bei Google.
   Vorher stand an dieser Stelle ein @import auf fonts.googleapis.com. Der
   kostet drei Runden nacheinander, bevor der erste Text steht: msw.css holen,
   auswerten, die Schrift-CSS von Google holen, auswerten, die Schriftdateien
   holen. Jetzt liegen die Dateien daneben und werden 30 Tage zwischengespeichert.
   font-display: swap zeigt den Text sofort in der Ersatzschrift und tauscht ihn,
   sobald Rubik da ist – niemand sieht mehr eine leere Seite.
   Die Dateien stammen aus docs/fetch-rubik.js, erzeugt mit docs/rubik-inline.css.
   Drei Teilsaetze: latin, latin-ext (Polnisch, Tschechisch, Ungarisch,
   Lettisch) und cyrillic (Ukrainisch). */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/rubik-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/rubik-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/rubik-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/rubik-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/rubik-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/rubik-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kyrillisch – gebraucht wird es fuer Ukrainisch (і ї є ґ und das
   Nummernzeichen №). Ohne diese vier Bloecke faellt der Text auf eine
   Systemschrift zurueck: lesbar, aber mitten im Satz eine andere
   Anmutung. cyrillic-ext wird nicht gebraucht – es deckt
   kirchenslawische und weitere Zeichen ab, von denen fuer Ukrainisch
   nur ґ in Frage kaeme, und das liegt zusaetzlich in cyrillic. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/rubik-300-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/rubik-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/rubik-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/rubik-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Flaggen im Sprachumschalter.
   Windows liefert keine Flaggen-Glyphen mit: Chrome und Edge zeigen dort
   statt der Flagge zwei Buchstaben (DE, GB, UA). Diese Schrift enthaelt
   ausschliesslich Flaggen und schliesst die Luecke; Firefox, Mac und
   iPhone brauchen sie nicht, laden sie wegen unicode-range aber auch nur,
   wenn wirklich eine Flagge gezeichnet wird.

   Herkunft: country-flag-emoji-polyfill (MIT), Glyphen aus Twemoji
   (CC BY 4.0, Twitter/X). */
@font-face {
  font-family: 'Flaggen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/twemoji-country-flags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF;
}


:root {
  /* ---- Brand primaries ---- */
  --msw-orange:        #F09625;
  --msw-sage:          #617162;

  /* ---- Brand secondaries ---- */
  --msw-terracotta:    #D27443;
  --msw-charcoal:      #393939;
  --msw-mist:          #EFEFEF;
  --msw-apricot:       #FFBE6C;
  --msw-slate:         #ABB1C1;
  --msw-sand:          #E7E4D7;

  /* ---- Neutral ramp ---- */
  --msw-white:         #FFFFFF;
  --msw-paper:         #FAF8F3;
  --msw-sand-100:      #F1EEE5;
  --msw-sand-200:      #E7E4D7;
  --msw-grey-100:      #EFEFEF;
  --msw-grey-300:      #D6D6D6;
  --msw-grey-500:      #9A9A9A;
  --msw-grey-700:      #5C5C5C;
  --msw-ink:           #393939;
  --msw-ink-900:       #222222;

  /* ---- Tint ramps ---- */
  --msw-orange-100:    #FDEBD3;
  --msw-orange-300:    #FFBE6C;
  --msw-orange-500:    #F09625;
  --msw-orange-700:    #D27443;
  --msw-sage-100:      #E4E8E3;
  --msw-sage-300:      #A8B2A6;
  --msw-sage-500:      #617162;
  --msw-sage-700:      #47533F;

  /* ---- Semantic status ---- */
  --msw-success:       #617162;
  --msw-warning:       #F09625;
  --msw-danger:        #C0503A;
  --msw-info:          #7E8BA3;

  /* ---- Semantic aliases ---- */
  --text-strong:       var(--msw-ink-900);
  --text-body:         var(--msw-charcoal);
  --text-muted:        var(--msw-grey-700);
  --text-subtle:       var(--msw-grey-500);
  --text-on-brand:     #FFFFFF;
  --text-link:         var(--msw-terracotta);
  --text-link-hover:   var(--msw-orange);

  --surface-page:      var(--msw-paper);
  --surface-card:      #FFFFFF;
  --surface-sunken:    var(--msw-sand-100);
  --surface-warm:      var(--msw-sand);
  --surface-brand-soft:var(--msw-orange-100);
  --surface-sage-soft: var(--msw-sage-100);

  --border-subtle:     #E6E2D8;
  --border-default:    #D8D3C7;
  --border-strong:     var(--msw-slate);
  --border-brand:      var(--msw-orange);

  --action-primary:        var(--msw-orange);
  --action-primary-hover:  var(--msw-terracotta);
  --action-primary-press:  #B85F30;
  --action-secondary:      var(--msw-sage);
  --action-secondary-hover:var(--msw-sage-700);
  --focus-ring:            var(--msw-orange);

  /* ---- Typography ---- */
  --font-sans:   "Flaggen", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-eyebrow:  0.8125rem;
  --ls-eyebrow:  0.18em;

  /* ---- Radii / Schatten / Motion ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;
  --shadow-xs:  0 1px 2px rgba(57, 57, 57, 0.06);
  --shadow-sm:  0 2px 8px rgba(57, 57, 57, 0.07);
  --shadow-md:  0 8px 24px rgba(71, 55, 40, 0.10);
  --shadow-lg:  0 18px 48px rgba(71, 55, 40, 0.14);
  --shadow-brand: 0 12px 30px rgba(240, 150, 37, 0.28);
  --ring-focus: 0 0 0 3px rgba(240, 150, 37, 0.35);
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
}

/* ---- Gemeinsame Grundstile ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  background: var(--surface-page);
  color: var(--text-body);
}

/* Eyebrow — die typische MSW-Zeile in Versalien mit weiter Laufweite */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--msw-sage-700);
}

/* Buttons — pillenförmig, Rubik Medium */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--action-primary); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--action-primary-hover); box-shadow: var(--shadow-brand); }
.btn-primary:active { background: var(--action-primary-press); }
.btn-secondary { background: transparent; color: var(--msw-sage-700); border: 1px solid var(--msw-sage-500); }
.btn-secondary:hover { background: var(--msw-sage-500); color: var(--text-on-brand); }
.btn-danger { background: transparent; color: var(--msw-danger); border: 1px solid var(--msw-danger); }
.btn-danger:hover { background: var(--msw-danger); color: var(--text-on-brand); }
.btn-sm { padding: 5px 14px; font-size: var(--fs-xs); }

input, select, textarea { font-family: var(--font-sans); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}