/* =====================================================================
   SwapBox — Foundations
   Colours, typography, radii, shadows and basic semantic styles
   extracted from the swapbox.fig file (St. Gallen, CH website).
   ===================================================================== */

/* Local Schibsted Grotesk — brand-supplied TTFs in /fonts */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal;  src: url("../fonts/SchibstedGrotesk-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: italic;  src: url("../fonts/SchibstedGrotesk-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal;  src: url("../fonts/SchibstedGrotesk-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: italic;  src: url("../fonts/SchibstedGrotesk-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-style: normal;  src: url("../fonts/SchibstedGrotesk-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-style: italic;  src: url("../fonts/SchibstedGrotesk-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal;  src: url("../fonts/SchibstedGrotesk-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: italic;  src: url("../fonts/SchibstedGrotesk-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal;  src: url("../fonts/SchibstedGrotesk-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: italic;  src: url("../fonts/SchibstedGrotesk-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-style: normal;  src: url("../fonts/SchibstedGrotesk-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-style: italic;  src: url("../fonts/SchibstedGrotesk-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ── Brand colours ─────────────────────────────────────────────── */
  --sb-teal-900:        #001A1B;   /* darkest gradient stop */
  --sb-teal-800:        #002C2E;   /* mid-dark gradient */
  --sb-teal-700:        #00373A;   /* mid gradient */
  --sb-teal-600:        #003B3F;   /* PRIMARY — text + brand */
  --sb-teal-550:        #013B3F;   /* PRIMARY (1px-shift dupe in fig) */
  --sb-mint:            #C5E4E3;   /* soft background, accent text on dark */
  --sb-yellow:          #DDE800;   /* CTA, sticker, highlights */
  --sb-blue-200:        #A6BFFF;   /* hand-drawn outline accent */
  --sb-blue-200-soft:   rgba(166,191,255,0.20);   /* border / faint shape fill */

  /* ── Neutrals ──────────────────────────────────────────────────── */
  --sb-ink:             #1D1D1B;   /* "almost black" body text */
  --sb-black:           #000000;
  --sb-white:           #FFFFFF;

  /* ── Semantic surfaces ─────────────────────────────────────────── */
  --sb-bg:              var(--sb-white);
  --sb-bg-soft:         var(--sb-mint);
  --sb-bg-dark:         var(--sb-teal-600);
  --sb-bg-dark-grad:    linear-gradient(180deg,
                          var(--sb-teal-700) 0%,
                          var(--sb-teal-800) 33%,
                          #002C2E 67%,
                          var(--sb-teal-900) 100%);

  --sb-fg:              var(--sb-teal-600);
  --sb-fg-on-dark:      var(--sb-white);
  --sb-fg-muted:        rgba(0,59,63,0.70);

  /* ── Type ─────────────────────────────────────────────────────── */
  --sb-font:            "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Display / heading sizes (line-height 100% per fig — tight!) */
  --sb-size-hero:       64px;   /* hero headline   (banner)   */
  --sb-size-h1:         48px;   /* section heading            */
  --sb-size-h2:         36px;
  --sb-size-h3:         32px;
  --sb-size-h4:         24px;   /* sub-heading / nav / body+  */
  --sb-size-body:       24px;   /* body copy is large @ 24px  */
  --sb-size-small:      20px;
  --sb-size-tiny:       16px;
  --sb-size-micro:      14px;

  /* Weights actually used (per metadata) */
  --sb-w-regular:       400;
  --sb-w-medium:        500;
  --sb-w-semibold:      600;
  --sb-w-bold:          700;
  --sb-w-extrabold:     800;
  --sb-w-black:         900;

  /* ── Radii ────────────────────────────────────────────────────── */
  --sb-radius-pill:     999px;     /* buttons          */
  --sb-radius-card:     60px;      /* large dark cards on dark sections */
  --sb-radius-card-lg:  86px;      /* enormous CTA-card radius (Preise) */
  --sb-radius-input:    8px;       /* contact-form inputs */

  /* ── Borders ──────────────────────────────────────────────────── */
  --sb-border-thick:    12px solid var(--sb-blue-200-soft);
  --sb-border-input:    1px solid rgba(0,59,63,0.25);

  /* ── Spacing scale (informal — fig uses generous gaps) ────────── */
  --sb-space-1:          4px;
  --sb-space-2:          8px;
  --sb-space-3:         16px;
  --sb-space-4:         24px;
  --sb-space-5:         32px;
  --sb-space-6:         48px;
  --sb-space-7:         64px;
  --sb-space-8:         96px;
  --sb-space-9:        128px;
  --sb-section-y:      180px;     /* vertical breathing between sections */

  /* ── Shadows ──────────────────────────────────────────────────── */
  /* The fig file uses almost NO shadows — the system relies on flat
     colour blocks. Keep these subtle and reserve them for floating
     elements (sticker, hover lift). */
  --sb-shadow-sticker:  0 8px 24px rgba(0,26,27,0.20);
  --sb-shadow-card:     0 2px 0 rgba(0,26,27,0.08);
}

/* =====================================================================
   Base reset + body type
   ===================================================================== */
html, body {
  font-family: var(--sb-font);
  color: var(--sb-fg);
  background: var(--sb-bg);
  font-size: var(--sb-size-body);
  line-height: 1.05;          /* tight per design */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================================
   Semantic type
   ===================================================================== */
.sb-hero {
  font-size: var(--sb-size-hero);
  font-weight: var(--sb-w-bold);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--sb-teal-600);
}
.sb-h1 {
  font-size: var(--sb-size-h1);
  font-weight: var(--sb-w-bold);
  line-height: 1;
  color: var(--sb-teal-600);
}
.sb-h1--on-dark   { color: var(--sb-white); }
.sb-h1--mint      { color: var(--sb-mint);  }
.sb-h1--yellow    { color: var(--sb-yellow); }

.sb-h2 {
  font-size: var(--sb-size-h2);
  font-weight: var(--sb-w-bold);
  line-height: 1.05;
  color: var(--sb-teal-600);
}
.sb-h3 {
  font-size: var(--sb-size-h3);
  font-weight: var(--sb-w-bold);
  line-height: 1.05;
  color: var(--sb-teal-600);
}
.sb-h4 {
  font-size: var(--sb-size-h4);
  font-weight: var(--sb-w-bold);
  line-height: 1.05;
}
.sb-body {
  font-size: var(--sb-size-body);
  font-weight: var(--sb-w-regular);
  line-height: 1.15;
  color: var(--sb-teal-600);
}
.sb-body--medium  { font-weight: var(--sb-w-medium); }
.sb-body--bold    { font-weight: var(--sb-w-bold); }
.sb-small {
  font-size: var(--sb-size-small);
  line-height: 1.2;
}
.sb-nav {
  font-size: var(--sb-size-h4);
  font-weight: var(--sb-w-bold);
  color: var(--sb-teal-600);
}
.sb-eyebrow {
  font-size: var(--sb-size-tiny);
  font-weight: var(--sb-w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sb-teal-600);
}

/* =====================================================================
   Buttons (yellow pill with tiny "swoop" arrow icon)
   ===================================================================== */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-family: var(--sb-font);
  font-size: var(--sb-size-h4);
  font-weight: var(--sb-w-bold);
  line-height: 1;
  color: var(--sb-teal-600);
  background: var(--sb-yellow);
  border: 0;
  border-radius: var(--sb-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}
.sb-btn:hover   { filter: brightness(1.04); }
.sb-btn:active  { transform: translateY(1px) scale(.99); }
.sb-btn .arrow  { width: 29px; height: 12px; display: inline-block; }

/* Section helpers */
.sb-section          { padding: 96px 84px; }
.sb-section--dark    { background: var(--sb-bg-dark-grad); color: var(--sb-white); }
.sb-section--mint    { background: var(--sb-mint); }
.sb-section--white   { background: var(--sb-white); }