/* Ontwerptokens. Licht en donker zitten in de basis: light-dark() waar de browser het kent,
   anders dezelfde waarden als losse sets. In de rest van de CSS staan geen kleuren. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  color-scheme: light dark;

  /* Huisstijl van het kantoor (MakelaarsVan): het oranje als accent, het marineblauw voor het logo.
     Het accent haalt 3:1 op wit en op papier, genoeg voor focusranden en grafische elementen. */
  --brand-light: #e2570a;
  --brand-dark: #ff8f45;
  --logo-light: #28326f;
  --logo-dark: #e9ecf8;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  --step-4: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --radius: 6px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --hair: 1px;
  --tap: 3rem;
  --measure: 40rem;
  --page: 74rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;

  /* De QR-code blijft altijd zwart op wit: scanners lezen omgekeerde codes slecht. */
  --qr-paper: #ffffff;
  --qr-ink: #000000;

  /* Energielabels in de vaste kleuren van het label, in licht en donker gelijk; tekst steeds op 4,5:1. */
  --label-a: #00843f;
  --label-b: #50b848;
  --label-c: #bfd630;
  --label-d: #fff200;
  --label-e: #fdb913;
  --label-f: #f37021;
  --label-g: #d7191c;
  --label-text-dark: #1a1a17;
  --label-text-light: #ffffff;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#efeeea, #0e0e0d);
    --sheet: light-dark(#ffffff, #191917);
    --sheet-2: light-dark(#f6f5f1, #21211e);
    --ink: light-dark(#141413, #f3f2ee);
    --ink-2: light-dark(#3d3c38, #cbc9c2);
    --muted: light-dark(#6b6964, #9d9b94);
    --line: light-dark(#e5e3de, #2d2d2a);
    --line-strong: light-dark(#8b8984, #706e68);
    --on-ink: light-dark(#ffffff, #121211);
    --accent: light-dark(var(--brand-light), var(--brand-dark));
    --accent-soft: light-dark(#fdeee3, #2b1d13);
    --logo: light-dark(var(--logo-light), var(--logo-dark));
    --ok: light-dark(#2d6a3e, #8fcf9f);
    --ok-soft: light-dark(#e3eee4, #1c2a1f);
    --warn: light-dark(#83570a, #e6bf6e);
    --warn-soft: light-dark(#f5ecd6, #2b2517);
    --bad: light-dark(#a1322b, #f0a199);
    --bad-soft: light-dark(#f6e2df, #321c1a);
    --info: light-dark(#2a587f, #97c1e6);
    --info-soft: light-dark(#e1ebf4, #17232e);
    --scrim: light-dark(rgb(20 20 18 / 0.45), rgb(0 0 0 / 0.6));
    --glass: light-dark(rgb(255 255 255 / 0.8), rgb(25 25 23 / 0.78));
    --glass-line: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.07));
    --glass-top: light-dark(rgb(255 255 255 / 0.74), rgb(34 34 31 / 0.72));
    --glass-bottom: light-dark(rgb(255 255 255 / 0.46), rgb(22 22 20 / 0.56));
    --glass-edge: light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.10));
    --glass-row: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.06));
    --glass-shadow: light-dark(rgb(24 30 70 / 0.28), rgb(0 0 0 / 0.55));
    --tint: light-dark(#f8efe1, #2a251d);
    --glow: light-dark(#ffc566, #ffb54d);
    --glow-core: light-dark(#ff6a00, #ff7a1a);
    --hero-dim: light-dark(rgb(255 255 255 / 0), rgb(8 8 8 / 0.5));
    --st-nieuw: light-dark(#f2b544, #f5c461);
    --st-gegevens: light-dark(#8fb3d9, #a3c2e6);
    --st-woning: light-dark(#8cc5a0, #a1d4b2);
    --st-vragen: light-dark(#c3a6e6, #d2bbf0);
    --st-compleet: light-dark(#5fae7c, #7cc897);
    --st-opname: light-dark(#f08a4b, #f6a06a);
    --st-doorgestuurd: light-dark(#2b2b29, #e8e6e1);
    --st-kopen: light-dark(#b6b1a6, #8d887e);
  }
}

@supports not (color: light-dark(#000, #fff)) {
  :root {
    --paper: #efeeea;
    --sheet: #ffffff;
    --sheet-2: #f6f5f1;
    --ink: #141413;
    --ink-2: #3d3c38;
    --muted: #6b6964;
    --line: #e5e3de;
    --line-strong: #8b8984;
    --on-ink: #ffffff;
    --accent: var(--brand-light);
    --accent-soft: #fdeee3;
    --logo: var(--logo-light);
    --ok: #2d6a3e;
    --ok-soft: #e3eee4;
    --warn: #83570a;
    --warn-soft: #f5ecd6;
    --bad: #a1322b;
    --bad-soft: #f6e2df;
    --info: #2a587f;
    --info-soft: #e1ebf4;
    --scrim: rgb(20 20 18 / 0.45);
    --glass: rgb(255 255 255 / 0.8);
    --glass-line: rgb(255 255 255 / 0.9);
    --glass-top: rgb(255 255 255 / 0.74);
    --glass-bottom: rgb(255 255 255 / 0.46);
    --glass-edge: rgb(255 255 255 / 0.85);
    --glass-row: rgb(255 255 255 / 0.55);
    --glass-shadow: rgb(24 30 70 / 0.28);
    --tint: #f8efe1;
    --glow: #ffc566;
    --glow-core: #ff6a00;
    --hero-dim: rgb(255 255 255 / 0);
    --st-nieuw: #f2b544;
    --st-gegevens: #8fb3d9;
    --st-woning: #8cc5a0;
    --st-vragen: #c3a6e6;
    --st-compleet: #5fae7c;
    --st-opname: #f08a4b;
    --st-doorgestuurd: #2b2b29;
    --st-kopen: #b6b1a6;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0e0e0d;
      --sheet: #191917;
      --sheet-2: #21211e;
      --ink: #f3f2ee;
      --ink-2: #cbc9c2;
      --muted: #9d9b94;
      --line: #2d2d2a;
      --line-strong: #706e68;
      --on-ink: #121211;
      --accent: var(--brand-dark);
      --accent-soft: #2b1d13;
      --logo: var(--logo-dark);
      --ok: #8fcf9f;
      --ok-soft: #1c2a1f;
      --warn: #e6bf6e;
      --warn-soft: #2b2517;
      --bad: #f0a199;
      --bad-soft: #321c1a;
      --info: #97c1e6;
      --info-soft: #17232e;
      --scrim: rgb(0 0 0 / 0.6);
      --glass: rgb(25 25 23 / 0.78);
      --glass-line: rgb(255 255 255 / 0.07);
      --glass-top: rgb(34 34 31 / 0.72);
      --glass-bottom: rgb(22 22 20 / 0.56);
      --glass-edge: rgb(255 255 255 / 0.10);
      --glass-row: rgb(255 255 255 / 0.06);
      --glass-shadow: rgb(0 0 0 / 0.55);
      --tint: #2a251d;
      --glow: #ffb54d;
      --glow-core: #ff7a1a;
      --hero-dim: rgb(8 8 8 / 0.5);
      --st-nieuw: #f5c461;
      --st-gegevens: #a3c2e6;
      --st-woning: #a1d4b2;
      --st-vragen: #d2bbf0;
      --st-compleet: #7cc897;
      --st-opname: #f6a06a;
      --st-doorgestuurd: #e8e6e1;
      --st-kopen: #8d887e;
    }
  }

  :root[data-theme="dark"] {
    --paper: #0e0e0d;
    --sheet: #191917;
    --sheet-2: #21211e;
    --ink: #f3f2ee;
    --ink-2: #cbc9c2;
    --muted: #9d9b94;
    --line: #2d2d2a;
    --line-strong: #706e68;
    --on-ink: #121211;
    --accent: var(--brand-dark);
    --accent-soft: #2b1d13;
    --logo: var(--logo-dark);
    --ok: #8fcf9f;
    --ok-soft: #1c2a1f;
    --warn: #e6bf6e;
    --warn-soft: #2b2517;
    --bad: #f0a199;
    --bad-soft: #321c1a;
    --info: #97c1e6;
    --info-soft: #17232e;
    --scrim: rgb(0 0 0 / 0.6);
    --glass: rgb(25 25 23 / 0.78);
    --glass-line: rgb(255 255 255 / 0.07);
    --glass-top: rgb(34 34 31 / 0.72);
    --glass-bottom: rgb(22 22 20 / 0.56);
    --glass-edge: rgb(255 255 255 / 0.10);
    --glass-row: rgb(255 255 255 / 0.06);
    --glass-shadow: rgb(0 0 0 / 0.55);
    --tint: #2a251d;
    --glow: #ffb54d;
    --glow-core: #ff7a1a;
    --hero-dim: rgb(8 8 8 / 0.5);
    --st-nieuw: #f5c461;
    --st-gegevens: #a3c2e6;
    --st-woning: #a1d4b2;
    --st-vragen: #d2bbf0;
    --st-compleet: #7cc897;
    --st-opname: #f6a06a;
    --st-doorgestuurd: #e8e6e1;
    --st-kopen: #8d887e;
  }
}