/* DE WeBellen-HUID OP ELKE ANDERE PAGINA (installeren, Mijn eSIM, bedankt, opwaarderen, voorwaarden, privacy)
 *
 * Zelfde opzet als site/merken/e-simmy/thema.css: merk.ts zet dit bestand er alleen bij voor een winkel in de
 * merk-vorm met deze huid, ná styles.css, met data-huid="webellen" op <html>. Het logo blijft het plaatje uit
 * shops.brand (webellen-logo.svg): deze huid heeft geen WOORDMERK.
 *
 * !important op de kleuren: brand.js zet de kleuren uit shops.brand op <html style>, en die winnen anders.
 * Zelfde waarden als :root in merk.css; tests/merk-vorm.test.mts houdt ze gelijk. Wit op oranje haalt AA
 * niet, dus de knoppen krijgen inkt als tekstkleur; kleine accenttekst is paars.
 */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root[data-huid="webellen"]{
  --orange:#f18700 !important;
  --orange-bright:#ff9a1f !important;
  --orange-soft:#fff1df !important;
  --orange-deep:#4b3d75 !important;
  --cream:#fffcf8 !important;
  --paper:#ffffff !important;
  --ink:#1e1a2e !important;
  --ink-soft:#3b3750 !important;
  --muted:#5e5a6b !important;
  --line:#e6e1ee !important;
  --accent:#665497 !important;
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display-weight:800;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light only;
}
[data-huid="webellen"] body{background:var(--cream);color:var(--ink);font-family:var(--body)}
[data-huid="webellen"] h1,[data-huid="webellen"] h2,[data-huid="webellen"] h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
[data-huid="webellen"] :focus-visible{outline-color:var(--orange)}

/* Kop en knoppen zoals de huid: oranje met inkt, 52px hoog. */
[data-huid="webellen"] .topbar{background:var(--cream);border-bottom:0;box-shadow:0 1px 0 var(--line)}
[data-huid="webellen"] .button{min-height:52px;padding:0 26px;border-radius:999px;font:700 16.5px/1 var(--body);color:var(--ink)}
[data-huid="webellen"] .button:hover{transform:none}
[data-huid="webellen"] .button.dark{background:#665497;color:#fff}
[data-huid="webellen"] input,[data-huid="webellen"] select,[data-huid="webellen"] button{font-family:var(--body)}

/* Pakketten: de selectie in paars, zoals in de huid. */
[data-huid="webellen"] .bundle{border-width:1.5px;border-radius:14px}
[data-huid="webellen"] .bundle[aria-pressed="true"]{border-color:#665497;box-shadow:inset 4px 0 0 #665497}

/* Voet: de inkt van de huid. */
[data-huid="webellen"] .footer{background:var(--ink);color:#cdc8d9}
[data-huid="webellen"] .footer a{color:#fff}