/* ==========================================================================
   Het merk, uit "Huisstijlgids Adornes Law.pdf".

   Dit bestand bevat alleen wat de gids zelf vastlegt: de vijf kleuren
   (hoofdstuk 03) en de drie patronen (hoofdstuk 05). Hoe de pagina die
   inzet staat in site.css.
   ========================================================================== */

:root {
  /* --- de vijf kleuren, hoofdstuk 03 ------------------------------------
     De gids zegt er per kleur bij waar ze voor dient:

       Zwart  grafische elementen, tekst en achtergronden
       Blauw  grafische elementen en achtergronden
       Geel   grafische elementen en achtergronden
       Rood   grafische elementen en achtergronden
       Wit    grafische elementen, tekst en achtergronden

     Alleen zwart en wit staan er als tekstkleur bij. Blauw, geel en rood zijn
     vlak- en accentkleuren, en zo worden ze hieronder ook gebruikt. */
  --zwart: #1d1d1b;
  --blauw: #031e44;
  --geel: #ffd95e;
  --rood: #f93924;
  --wit: #ffffff;

  /* --- twee afgeleiden voor het scherm ----------------------------------
     Het rood haalt op wit 3,7:1 en met wit erop eveneens 3,7:1. Dat is genoeg
     voor grote cijfers en vormen, te weinig voor tekst. Vandaar een donkerder
     rood waar het rood wél tekst moet dragen. Het volle #f93924 blijft staan
     waar het om vorm gaat: het logo, de banen, het schaakbord, de kaders.

     Blauw op geel haalt 12:1, wit op blauw 16,5:1, geel op blauw 12:1. Die
     drie combinaties dragen dus alle tekstmaten. Wit op rood en zwart op rood
     halen het niet: op rood komt daarom nooit lopende tekst te staan. */
  --rood-tekst: #c81e10; /* 5,8:1 op wit */
  --rood-vlak: #d0210f; /* 5,4:1 met wit erop */
}

/* ==========================================================================
   Patronen, hoofdstuk 05.

   Drie stuks: horizontale banen in geel en rood, schuine gele banen op blauw,
   en een rood-wit schaakbord. Ze staan hier als gradient in plaats van als
   plaatje, zodat ze op elk formaat scherp blijven en met --pat-maat
   meeschalen.

   De gids noemt ze "een aanvullend grafisch element (…) om achtergronden en
   toepassingen meer karakter te geven". Ze zijn dus vlakvulling en geen
   ondergrond voor tekst: waar er tekst overheen moet, komt er een vlak tussen.
   ========================================================================== */

/* Horizontale banen, geel en rood. */
.pat-banen {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--geel) 0,
    var(--geel) var(--pat-maat, 0.75rem),
    var(--rood) var(--pat-maat, 0.75rem),
    var(--rood) calc(var(--pat-maat, 0.75rem) * 2)
  );
}

/* Verticale banen. Op de voorbeelden in hoofdstuk 06 staat dit patroon
   gekanteld: als rand rond het naamkaartje, en als overgang tussen een
   kleurvlak en een beeld. De kleur van de balken volgt de omgeving, vandaar
   --baan-kleur in plaats van een vaste kleur. */
.pat-balken {
  background-image: repeating-linear-gradient(
    to right,
    var(--baan-kleur, var(--rood)) 0,
    var(--baan-kleur, var(--rood)) var(--pat-maat, 0.75rem),
    transparent var(--pat-maat, 0.75rem),
    transparent calc(var(--pat-maat, 0.75rem) * 2)
  );
}

/* Schuine gele banen op blauw. */
.pat-schuin {
  background-color: var(--blauw);
  background-image: repeating-linear-gradient(
    45deg,
    var(--geel) 0,
    var(--geel) var(--pat-maat, 0.75rem),
    transparent var(--pat-maat, 0.75rem),
    transparent calc(var(--pat-maat, 0.75rem) * 2)
  );
}

/* Schaakbord, rood op wit. Verwijst naar de heraldiek van de familie
   Adornes; in de gids ligt het als voering in de enveloppe. */
/* Met conic-gradient en niet met twee schuine verlopen: die laatste truc geeft
   wiggen in plaats van vierkanten zodra de cel groot wordt. */
.pat-schaak {
  --cel: var(--pat-maat, 0.75rem);
  background-color: var(--wit);
  background-image: conic-gradient(
    var(--rood) 0 25%,
    var(--wit) 0 50%,
    var(--rood) 0 75%,
    var(--wit) 0
  );
  background-size: calc(var(--cel) * 2) calc(var(--cel) * 2);
}