/* ==========================================================================
   Swibeco Design System — tokens
   Source: Claude Design project "Swibeco Design System"
   (e1d744c1-0ed5-4b3c-a7e5-5e4aa0023c87), colors_and_type.css
   Museo Sans OTFs are licensed assets — drop them into src/fonts/ to
   self-host; until then Nunito Sans (closest Google Fonts match per the
   design system README) is the flagged substitution.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,500;0,700;0,900;1,500&display=swap");

@font-face {
  font-family: "Museo Sans";
  src: url("../fonts/MuseoSans_500.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("../fonts/MuseoSans_700.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url("../fonts/MuseoSans_900.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand / primary */
  --sw-primary: #006CFF;
  --sw-primary-dark: #004CB3;
  --sw-main-light: #EBF1FD;
  --sw-main-lighter: #F2F8FF;
  --sw-footer-blue: #1F3077;
  --sw-footer-blue-alt: #1B2A6A;

  /* Text */
  --sw-fg-1: #1E2023;
  --sw-fg-3: #707070;
  --sw-fg-4: #ADADAD;
  --sw-fg-inverse: #FFFFFF;

  /* Surfaces */
  --sw-bg: #FFFFFF;
  --sw-bg-subtle: #F8FBFD;
  --sw-neutral-grey: #EEEEEE;

  /* Borders */
  --sw-border: #D7E4F2;
  --sw-border-weak: #EEEEEE;

  /* Semantic */
  --sw-success: #007644;
  --sw-success-light: #D9EAE3;
  --sw-danger: #ED0C2F;
  --sw-danger-light: #FCDBE0;
  --sw-warning: #FFD34D;
  --sw-warning-light: #FFF6D8;

  /* Decoration palette */
  --sw-dec-orange: #FF9F3E;
  --sw-dec-orange-light: #FFECD8;
  --sw-dec-purple: #8C83FF;
  --sw-dec-purple-light: #EEECFF;
  --sw-dec-green: #72D3BC;
  --sw-dec-green-light: #D9EAE3;
  --sw-dec-red: #FF8182;
  --sw-dec-yellow: #F6C65B;
  --sw-dec-mint: #50E3C2;

  /* The Selection (gold) */
  --sw-selection-gold: #BA9662;

  /* Shadows */
  --sw-shadow-btn: 0 3px 6px 0 rgba(62, 97, 145, 0.20);
  --sw-shadow-glow: 0 0 6px 0 rgba(0, 108, 255, 0.24);
  --sw-shadow-card: 0 2px 12px 0 rgba(0, 22, 51, 0.10);

  /* Radii */
  --sw-radius-sm: 4px;
  --sw-radius-md: 8px;
  --sw-radius-lg: 16px;
  --sw-radius-pill: 999px;

  /* Spacing (8-pt) */
  --sw-space-1: 4px;
  --sw-space-2: 8px;
  --sw-space-3: 12px;
  --sw-space-4: 16px;
  --sw-space-5: 24px;
  --sw-space-6: 32px;
  --sw-space-7: 48px;
  --sw-space-8: 80px;

  /* Type */
  --sw-font-sans: "Museo Sans", "Nunito Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --sw-fs-display: 48px; --sw-lh-display: 62px; --sw-ls-display: 0.768px;
  --sw-fs-h1: 36px; --sw-lh-h1: 53px;
  --sw-fs-h2: 32px; --sw-lh-h2: 41px;
  --sw-fs-h3: 26px; --sw-lh-h3: 33px;
  --sw-fs-h4: 22px; --sw-lh-h4: 29px;
  --sw-fs-lg: 20px; --sw-lh-lg: 27px;
  --sw-fs-md: 17px; --sw-lh-md: 23px;
  --sw-fs-body: 16px; --sw-lh-body: 22px;
  --sw-fs-sm: 15px; --sw-lh-sm: 21px;
  --sw-fs-xs: 13px; --sw-lh-xs: 18px;
  --sw-fs-2xs: 11px; --sw-lh-2xs: 15px;

  /* Motion — restrained per design system */
  --sw-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --sw-dur: 180ms;
  --sw-dur-press: 100ms;
}

html, body {
  font-family: var(--sw-font-sans);
  color: var(--sw-fg-1);
  background: var(--sw-bg-subtle);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

h1, .sw-h1 { font-size: var(--sw-fs-h1); line-height: var(--sw-lh-h1); font-weight: 700; margin: 0; }
h2, .sw-h2 { font-size: var(--sw-fs-h2); line-height: var(--sw-lh-h2); font-weight: 700; margin: 0; }
h3, .sw-h3 { font-size: var(--sw-fs-h3); line-height: var(--sw-lh-h3); font-weight: 700; margin: 0; }
h4, .sw-h4 { font-size: var(--sw-fs-h4); line-height: var(--sw-lh-h4); font-weight: 700; margin: 0; }
p, .sw-body { font-size: var(--sw-fs-md); line-height: var(--sw-lh-md); font-weight: 500; margin: 0; }
.sw-caption { font-size: var(--sw-fs-sm); line-height: var(--sw-lh-sm); font-weight: 500; color: var(--sw-fg-3); }
.sw-legal { font-size: var(--sw-fs-xs); line-height: var(--sw-lh-xs); font-weight: 500; color: var(--sw-fg-3); }
.sw-eyebrow {
  font-size: var(--sw-fs-xs); line-height: var(--sw-lh-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sw-primary);
}

a { color: var(--sw-primary); text-decoration: none; }
a:hover { color: var(--sw-primary-dark); text-decoration: underline; }

/* Buttons */
.sw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-2);
  font-family: var(--sw-font-sans); font-size: var(--sw-fs-md); font-weight: 700;
  border-radius: var(--sw-radius-md); padding: 12px 24px; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease), color var(--sw-dur) var(--sw-ease);
}
.sw-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.sw-btn-primary { background: var(--sw-primary); color: var(--sw-fg-inverse); box-shadow: var(--sw-shadow-btn); }
.sw-btn-primary:hover { background: var(--sw-primary-dark); }
.sw-btn-primary:active { background: var(--sw-footer-blue-alt); transition-duration: var(--sw-dur-press); }
.sw-btn-secondary { background: var(--sw-bg); color: var(--sw-primary); border-color: var(--sw-primary); box-shadow: var(--sw-shadow-glow); }
.sw-btn-secondary:hover { background: var(--sw-primary); color: var(--sw-fg-inverse); }

/* Cards */
.sw-card {
  background: var(--sw-bg);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-md);
  padding: var(--sw-space-5);
  transition: box-shadow var(--sw-dur) var(--sw-ease);
}
.sw-card--hover:hover { box-shadow: var(--sw-shadow-card); }

/* Chips / tags */
.sw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sw-fs-xs); font-weight: 700;
  border-radius: var(--sw-radius-pill); padding: 4px 12px;
  background: var(--sw-main-light); color: var(--sw-primary);
}
.sw-chip--success { background: var(--sw-success-light); color: var(--sw-success); }
.sw-chip--gold { background: #F5EEE3; color: var(--sw-selection-gold); }

/* Inputs */
.sw-input {
  font-family: var(--sw-font-sans); font-size: var(--sw-fs-md); font-weight: 500;
  color: var(--sw-fg-1); background: var(--sw-bg);
  border: 1px solid var(--sw-border); border-radius: 5px;
  padding: 12px 16px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease);
}
.sw-input:focus { border-color: var(--sw-primary); box-shadow: var(--sw-shadow-glow); }