/* =====================================================================
   VORMIDO — ONTWERPSYSTEEM

   Zo klein mogelijk gehouden. Vier koppen, drie knoppen, één set kleuren
   en één set maten. Wijk je ergens van af, doe dat dan bewust en in
   style.css, niet hier.

   Dit bestand wordt vóór style.css geladen.
   ===================================================================== */

:root{

  /* ---------------------------------------------------------------- 1. KLEUR */

  --bg:#FFFFFF;        /* paginavlak en kaarten */
  --soft:#F7F7F7;      /* grijs vlak: achter kaarten, nevenknoppen */
  --soft-2:#EDEDED;    /* datzelfde grijs bij hover */
  --line:#E6E3DE;      /* elke lijn en rand */

  --ink:#1E1B1C;       /* koppen en nadruk */
  --ink-2:#4A4647;     /* lopende tekst */
  --muted:#6B6667;     /* labels en fijndruk */

  --accent:#00AEEF;        /* het logoblauw: randen, selectie, links */
  --accent-soft:#E4F4FB;   /* vlak achter het accent */
  --accent-fill:#00AEEF;   /* gevulde knop: hetzelfde logoblauw */
  --accent-dark:#0096CF;   /* diezelfde knop bij hover: een slag
                              donkerder dan de cyaan, niet meer dan dat */
  --accent-ink:#FFFFFF;    /* tekst op die knop */

  --ok:#1E8E3E;        /* gelukt */
  --ok-soft:#E8F6EC;
  --err:#C0392B;       /* fout */
  --err-soft:#FCF3F2;

  /* De vier procesinkten van het logo. Alleen in de hero en de
     footerstreep; niet voor iets anders gebruiken. */
  --c:#00ADEF; --m:#EC008C; --y:#FFF200; --k:#1E1B1C;

  /* ---------------------------------------------------------------- 2. LETTERS */

  --display:"Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Vier maten voor tekst, vier voor koppen. Meer is er niet. */
  --text:17px;         /* alles wat je leest */
  --text-sm:15px;      /* labels, knoppen, bijschriften */
  --text-xs:13px;      /* fijndruk */
  --leading:1.6;

  /* ---------------------------------------------------------------- 3. VORM */

  --radius:12px;       /* velden, beeldvlakken, kleine blokken */
  --radius-lg:16px;    /* kaarten en panelen */
  --radius-pill:999px; /* knoppen */
  --border:1px;

  /* ---------------------------------------------------------------- 4. MAAT */

  --btn-h:52px;        /* knoppen en velden zijn even hoog */
  --btn-pad:26px;

  --pad:clamp(20px, 4vw, 56px);   /* marge links en rechts van de pagina */
  --wrap:1200px;                  /* breedte van de inhoud */
  --sec:clamp(48px, 6vw, 88px);   /* tussen twee secties */
  --gap:16px;                     /* tussen kaarten */
  --head-gap:12px;                /* tussen een sectiekop en wat eronder
                                     staat; overal gelijk */
  --block-pad:24px;               /* binnenruimte van een kaart */
  --band-pad:40px;                /* boven- en onderruimte van een band
                                     over de volle breedte; boven en onder
                                     gelijk, anders oogt het scheef */
}

/* =====================================================================
   KOPPEN
   Vier niveaus, elk met een vaste maat en dikte. Gebruik ze op volgorde:
   h1 is de paginatitel en komt één keer voor, h2 is een sectie, h3 een
   blok, h4 een kopje binnen een blok. De maat hoort bij het niveau, niet
   bij hoe groot je het wilt hebben.
   ===================================================================== */

h1,.t-h1{font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1}
h2,.t-h2{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
h3,.t-h3{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
h4,.t-h4{font-size:17px;font-weight:600;letter-spacing:0;line-height:1.3}

h1,h2,h3,h4,.t-h1,.t-h2,.t-h3,.t-h4{
  font-family:var(--display);color:var(--ink);margin:0 0 16px
}

/* Op een telefoon één stap kleiner. Dit is de enige uitzondering op de
   maten hierboven. */
@media (max-width:640px){
  h1,.t-h1{font-size:30px}
  h2,.t-h2{font-size:22px}
  h3,.t-h3{font-size:18px}
}

/* =====================================================================
   KNOPPEN
   Drie stijlen, één maat. Per scherm staat er één accentknop: de actie
   die je wilt dat iemand neemt. Al het andere is normaal of stil.
   ===================================================================== */

.v-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:0 var(--btn-pad);
  border:var(--border) solid transparent;border-radius:var(--radius-pill);
  font-family:var(--body);font-size:var(--text-sm);font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s
}

/* accent — bestellen, afrekenen, uploaden */
.v-btn--accent{background:var(--accent-fill);color:var(--accent-ink)}
.v-btn--accent:hover{background:var(--accent-dark)}

/* normaal — alle andere acties */
.v-btn--normal{background:var(--soft);color:var(--ink)}
.v-btn--normal:hover{background:var(--soft-2)}

/* stil — mag niet opvallen */
.v-btn--quiet{background:transparent;color:var(--ink-2);padding:0 8px}
.v-btn--quiet:hover{color:var(--ink);text-decoration:underline}

.v-btn--block{width:100%}
.v-btn:disabled,.v-btn[disabled]{filter:grayscale(1) opacity(.45);cursor:not-allowed}

/* =====================================================================
   VELDEN EN KAARTEN
   ===================================================================== */

.v-field{
  width:100%;min-height:var(--btn-h);padding:0 14px;
  font-family:var(--body);font-size:var(--text-sm);color:var(--ink);
  border:var(--border) solid var(--line);border-radius:var(--radius);background:var(--bg)
}
.v-field:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}

.v-card{
  border:var(--border) solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg);padding:var(--block-pad)
}