@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* LIGHT (default) */ 
:root{
  /* brand */ 
  --brand: #0071bc;
  --brand-2: #4e75ad;
  --accent: #03a9f4;
 
  /* surfaces */
  --bg: #f7f7fa;
  --surface: #ffffff;
  --surface-2: #f6f8fa;

  /* text */
  --text: #1f2937;
  --text-2: rgba(31,41,55,.70);
  --heading: #415165;

  /* borders & focus */
  --border: rgba(15,23,42,.14);
  --border-2: rgba(15,23,42,.10);
  --ring: 0 0 0 3px rgba(0,113,188,.18);

  /* radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-pill: 999px;

  /* elevation */
  --sh-sm: 0 1px 2px rgba(15,23,42,.06);
  --sh-md: 0 10px 24px rgba(15,23,42,.10);

  /* typography */
  --font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs: 13px;

  /* semantic */
  --ok: #16a34a;
  --warn: #f59e0b;
  --yellow: #ffdd57;
  --bad: #ef4444;

  /* Bulma 1.0 hooks */
  --bulma-family-primary: var(--font);
  --bulma-body-background-color: var(--bg);
  --bulma-body-color: var(--text);

  --bulma-primary: var(--brand);
  --bulma-link: var(--brand);
  --bulma-border: var(--border);

  /* Override Bulma link/primary HSL to #0398c8 (blauw ipv paars) */
  --bulma-link-h: 195;
  --bulma-link-s: 97%;
  --bulma-link-l: 40%;
  --bulma-primary-h: 204;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 37%;

  --bulma-radius-small: var(--r-xs);
  --bulma-radius: var(--r-xs);
  --bulma-radius-medium: var(--r-sm);
  --bulma-radius-large: var(--r-md);
}

/* DARK */
html[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f172a;
  --surface-2: #111c33;

  --text: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.68);
  --heading: rgba(255,255,255,.92);

  --border: rgba(255,255,255,.14);
  --border-2: rgba(255,255,255,.10);
  --ring: 0 0 0 3px rgba(3,169,244,.20);

  --sh-sm: 0 1px 2px rgba(0,0,0,.35);
  --sh-md: 0 12px 30px rgba(0,0,0,.45);

  --bulma-body-background-color: var(--bg);
  --bulma-body-color: var(--text);
  --bulma-border: var(--border);

  /* Override Bulma link/primary HSL in dark mode */
  --bulma-link-h: 195;
  --bulma-link-s: 97%;
  --bulma-link-l: 40%;
  --bulma-primary-h: 204;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 37%;
}

/* baseline */
html{ background: var(--bg); }
body{
  font-family: var(--font) !important;
  font-size: var(--fs) !important;
  color: var(--text);
}
h1,h2,h3,h4,h5,h6{ color: var(--heading); }

a{ color: var(--brand); }
a:hover{ color: var(--text); text-decoration: underline; }

:where(.button,button,.input,select,textarea,.select2-selection):focus{
  outline: none !important;
  box-shadow: var(--ring) !important;
}