/* ==========================================================================
   MaréaSol Maison · Design-Tokens
   Quelle: Brandbook v1.4 (Nov. 2026), S. 11, 12, 13, 15, 18, 21
   Plattformneutral: diese Datei (oder tokens.json) in jedes Theme übernehmen.
   ========================================================================== */
:root {
  /* Farben · Grundpalette (S. 11) */
  --ms-kalk: #F7F2EA;        /* Haupthintergrund · ca. 55 % */
  --ms-sand: #E8DCC8;        /* Flächen, Sektionen · ca. 20 % */
  --ms-travertin: #D6C3A5;   /* Karten, Linien */
  --ms-champagner: #C4A07A;  /* Akzent hell */
  --ms-gold: #A07C4E;        /* Akzent, Links, Haarlinien · sparsam, nie Fläche */
  --ms-taupe: #8A7866;       /* Nebentext, nur ab 16 px bzw. Hinweise 13 px */
  --ms-basalt: #5A544E;      /* dunkle Flächen */
  --ms-espresso: #2B221B;    /* Text, Logo, Buttons, Footer */

  /* Farben · Special Edition (S. 12) · ersetzt Gold nur auf Special-Edition-Seiten */
  --ms-bordeaux: #5E2230;
  --ms-olive: #5F6647;
  --ms-petrol: #1E4A52;

  /* Oberflächen der Lampen (S. 13) · nur Bildschirmdarstellung der Swatches */
  --ms-finish-ceramic: #D9C3A3;     /* Montana Gold 7220 */
  --ms-finish-champagner: #C99B72;  /* Montana Metallic Champagner */
  --ms-finish-goldmatt: #B08A5E;    /* Montana Gold M3010 */
  --ms-finish-concrete: #7A746C;    /* Montana Gold 8150 */

  /* Semantische Rollen */
  --ms-bg: var(--ms-kalk);
  --ms-surface: var(--ms-sand);
  --ms-line: var(--ms-travertin);
  --ms-text: var(--ms-espresso);
  --ms-text-muted: var(--ms-taupe);
  --ms-accent: var(--ms-gold);       /* Special Edition: --ms-bordeaux / -olive / -petrol */
  --ms-dark: var(--ms-espresso);
  --ms-on-dark: var(--ms-kalk);

  /* Schriften (S. 14) */
  --ms-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ms-sans: "Mulish", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Schrift-Hierarchie (S. 15) · Desktop */
  --ms-h1-size: 64px;   --ms-h1-lh: 1.05;  --ms-h1-weight: 300;
  --ms-h2-size: 44px;   --ms-h2-lh: 1.1;   --ms-h2-weight: 300;
  --ms-h3-size: 28px;   --ms-h3-lh: 1.2;   --ms-h3-weight: 400;
  --ms-quote-size: 24px;                    /* Cormorant 400 Italic */
  --ms-body-size: 17px; --ms-body-lh: 1.7; --ms-body-weight: 300;
  --ms-small-size: 13px;                    /* Mulish 400, Hinweise */
  --ms-eyebrow-size: 12px;                  /* Mulish 400, Versalien */
  --ms-button-size: 13px;                   /* Mulish 400, Versalien */
  --ms-price-size: 22px;                    /* Cormorant 400 */
  --ms-label-spacing: .35em;
  --ms-button-spacing: .3em;

  /* Raster & Layout (S. 21) */
  --ms-u: 8px;
  --ms-space-1: 8px;
  --ms-space-2: 16px;
  --ms-space-3: 24px;
  --ms-space-4: 40px;
  --ms-space-5: 64px;
  --ms-space-6: 104px;
  --ms-section: 104px;
  --ms-content-max: 1200px;
  --ms-text-max: 680px;
  --ms-gutter: 40px;

  /* Formen (S. 18) */
  --ms-radius: 0px;
  --ms-arch: 999px 999px 0 0;   /* Rundbogen: nur oben */
  --ms-hairline: 1px;

  /* Bewegung (S. 21) */
  --ms-fade: 700ms;
  --ms-fade-slow: 800ms;
  --ms-ease: cubic-bezier(.33, 0, .2, 1);
  --ms-kenburns-scale: 1.05;
  --ms-kenburns-duration: 12s;

  /* Bildformate */
  --ms-tile-ratio: 445 / 635;
  --ms-room-ratio: 16 / 9;
  --ms-cutout-ratio: 4 / 5;
}

@media (max-width: 767px) {
  :root {
    --ms-h1-size: 40px;
    --ms-h2-size: 32px;
    --ms-h3-size: 24px;
    --ms-quote-size: 20px;
    --ms-body-size: 16px;
    --ms-eyebrow-size: 11px;
    --ms-price-size: 20px;
    --ms-section: 64px;
    --ms-gutter: 24px;   /* Seitenrand mobil */
  }
}