/* Swiss Baan Chiang — design tokens (ported from design_handoff_website/…/colors_and_type.css).
 * GENERATED by tools/build-css.mjs – edit the script or the source, not this file.
 * Colour values: GeneratePress › Customizer › Farben › Globale Farben (slug = variable name). */

/* ---- Self-hosted web fonts (DSGVO: no Google Fonts requests) ------------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/montserrat-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/italiana-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/marcellus-latin-400-normal.woff2') format('woff2'); }
/* Thai (TH site): Trirong for display, Prompt for text – loaded only for Thai glyphs (unicode-range). */
@font-face { font-family: 'Trirong'; font-weight: 300; font-display: swap; src: url('../fonts/trirong-thai-300-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Trirong'; font-weight: 400; font-display: swap; src: url('../fonts/trirong-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Prompt'; font-weight: 300; font-display: swap; src: url('../fonts/prompt-thai-300-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Prompt'; font-weight: 400; font-display: swap; src: url('../fonts/prompt-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Prompt'; font-weight: 500 700; font-display: swap; src: url('../fonts/prompt-thai-500-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
/* Licensed brand fonts (Fiona, Corporative): functions.php adds their @font-face only when the woff2 files exist in assets/fonts/. */

/* =========================================================================
   Swiss Baan Chiang — Color & Type tokens
   Warm, earthy resort palette. Deep wattblau ground + warm copper gold.
   ========================================================================= */
/* Montserrat is the production body face. Fiona (display) and Corporative
   (sub-display / supporting sans) are licensed brand fonts — substitutes
   are loaded from Google Fonts when the licensed files are not present.
   Drop Fiona-*.woff2 + Corporative-*.woff2 into /fonts to override. */
:where(:root) {
  
  --sbc-wattblau:       #2d4250;   
  --sbc-wattblau-deep:  #1f2f3a;   
  --sbc-wattblau-soft:  #3b5666;   
  --sbc-copper:         #b28066;   
  --sbc-copper-light:   #c89a82;   
  --sbc-gold:           #c9a972;   
  --sbc-gold-bright:    #d9bd86;   

  
  --sbc-sand:           #e9dfd1;   
  --sbc-sand-deep:      #d4c5b0;   
  --sbc-clay:           #8a6750;   
  --sbc-stone:          #6b6760;   
  --sbc-ink:            #1a1a1a;   

  
  --bg:           var(--sbc-wattblau);
  --bg-elevated:  var(--sbc-wattblau-soft);
  --bg-deep:      var(--sbc-wattblau-deep);
  --bg-paper:     var(--sbc-sand);

  --fg:           var(--sbc-copper);          
  --fg-strong:    var(--sbc-gold-bright);     
  --fg-muted:     rgba(178,128,102,0.65);
  --fg-on-paper:  var(--sbc-ink);
  --fg-on-paper-muted: var(--sbc-stone);

  --line:         rgba(191, 166, 114,0.30);     
  --line-strong:  var(--sbc-gold);

  --accent:       var(--sbc-gold);
  --accent-warm:  var(--sbc-copper);

  
  --font-display: 'Fiona', 'Italiana', 'Marcellus', 'Cormorant Garamond', 'Didot', serif;
  
  --font-sub:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --tracking-wide:    0.18em;   
  --tracking-display: 0.04em;   
  --tracking-body:    0;

  
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  
  --shadow-soft:   0 1px 2px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.18);
  --shadow-card:   0 2px 6px rgba(0,0,0,0.22), 0 18px 40px rgba(0,0,0,0.28);
  --shadow-inset:  inset 0 0 0 1px var(--line);
}



.sbc .sbc-eyebrow {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size:13.5px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.sbc .sbc-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
}

.sbc .sbc-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.sbc .sbc-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size:28px;
  line-height: 1.2;
  color: var(--fg);
}

.sbc .sbc-h4 {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size:18px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-strong);
}

.sbc .sbc-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:20px;
  line-height: 1.55;
  color: var(--fg);
}

.sbc .sbc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size:15px;
  line-height: 1.7;
  color: var(--fg);
}

.sbc .sbc-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size:13.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.sbc .sbc-caps {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size:14px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg);
}


.sbc .sbc-rule {
  display: inline-block;
  height: 1px;
  width: 64px;
  background: var(--line-strong);
  vertical-align: middle;
}



:where(:root) {
  --sbc-nachtblau:      #172f3c;   
  --sbc-wattblau:       #2d4250;   
  --sbc-wattblau-deep:  #10232d;   
  --sbc-wattblau-soft:  #34505f;   
  --sbc-gold:           #bfa672;   
  --sbc-gold-bright:    #bfa672;
  --sbc-gold-light:     #d4bf8e;   
  --sbc-copper:         #b28066;   
  --sbc-copper-light:   #c4957c;

  --bg:          var(--sbc-nachtblau);
  --bg-deep:     var(--sbc-wattblau);
  --bg-elevated: var(--sbc-wattblau);
  --bg-card:     rgba(8, 22, 30, 0.38);

  --fg:          var(--sbc-gold);
  --fg-strong:   var(--sbc-gold);
  --fg-muted:    rgba(178, 128, 102, 0.92);

  --line:        rgba(191, 166, 114, 0.22);
  --line-strong: var(--sbc-gold);

  --radius-card: 6px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  
  --font-display: 'Fiona', 'Italiana', 'Trirong', 'Marcellus', 'Cormorant Garamond', serif;
  --font-sub:     'Montserrat', 'Prompt', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Prompt', 'Helvetica Neue', Arial, sans-serif;
}