/*
Theme Name: Marino Child
Theme URI: https://aquaasan-corals.nl/
Description: Update-veilig child theme voor Aquaasan Corals. Bevat het designsysteem "Onder blauw licht" als variabelen, plus template-aanpassingen.
Author: Aquaasan Corals
Template: marino
Version: 1.1.0
Text Domain: marino-child
*/

/* ==========================================================================
   Designsysteem "Onder blauw licht"

   Goedgekeurd op 6 september 2026. De gedachte: het mooiste designelement dat
   deze winkel heeft is het product zelf. Koralen fluoresceren tegen donker
   water, dus de interface wordt rustig en donker-koel waar het product
   schittert, en licht en kalm waar gelezen wordt.

   Deze variabelen veranderen op zichzelf nog niets aan de site. Ze staan
   klaar zodat elk template dat verbouwd wordt eruit kan putten, en er nooit
   meer een kleurcode los in een pagina hoeft te staan.
   ========================================================================== */

:root {
  /* --- Diep water: het anker --------------------------------------------
     Bewust geen standaard bijna-zwart. Het donker is duidelijk blauw, zodat
     de fotografie er warm tegen afsteekt. */
  --aqc-diepzee:       #071F2E;
  --aqc-diepzee-op:    #0E3446;
  --aqc-diepzee-rand:  #1B4257;

  /* --- Leesvlakken -------------------------------------------------------
     Koel gebroken wit. Nooit knalwit op een groot vlak: dat is vermoeiend
     naast donkere fotografie. */
  --aqc-schuim:        #F2F6F7;
  --aqc-schuim-op:     #FFFFFF;
  --aqc-schuim-rand:   #DBE6EA;

  /* --- Het accent --------------------------------------------------------
     Een accentkleur, uit de koraalwereld, uitsluitend voor acties. Alles wat
     klikbaar en belangrijk is, is koraal; al het andere niet.

     Let op bij gebruik: koraal met witte tekst haalt de contrastnorm niet
     (2,9 op 1). Gebruik --aqc-op-koraal voor tekst op een koraalvlak; dat is
     7,1 op 1 en leest bovendien scherper. */
  --aqc-koraal:        #FF6B4A;
  --aqc-koraal-hover:  #FF7D5F;
  --aqc-koraal-diep:   #E2512F;  /* voor tekstlinks op een licht vlak */
  --aqc-op-koraal:     #071F2E;

  /* --- Neutralen ---------------------------------------------------------
     Met een blauwzweem, zodat niets grijs-vies wordt naast het diepblauw. */
  --aqc-inkt:          #0B2331;
  --aqc-inkt-zacht:    #47646F;
  --aqc-mist:          #8AA3AF;
  --aqc-mist-donker:   #7E9BAA;

  /* --- Betekeniskleuren --------------------------------------------------
     Los van het accent: deze zeggen iets over een toestand, niet over een
     actie. */
  --aqc-goed:          #2E9E7B;
  --aqc-goed-licht:    #6FD6B0;   /* op een donkere ondergrond */
  --aqc-let-op:        #C9821B;
  --aqc-fout:          #C4442C;

  /* --- Letters -----------------------------------------------------------
     Twee families die iets tegenovergestelds doen. Fraunces heeft zachte,
     licht onregelmatige vormen: dat past bij levende have. Archivo is een
     heldere, licht technische letter: dat past bij een hobby waar het over
     parameters, dosering en verlichting gaat. */
  --aqc-kop:  Fraunces, Georgia, "Times New Roman", serif;
  --aqc-body: Archivo, "Helvetica Neue", Arial, sans-serif;

  /* --- Maatvoering -------------------------------------------------------
     Radius encodeert rangorde: knoppen strak, kaarten iets zachter. Niet
     overal dezelfde ronding. */
  --aqc-r-klein: 4px;
  --aqc-r-knop:  6px;
  --aqc-r-kaart: 10px;

  /* Regellengte voor lopende tekst. Boven de 66 tekens raakt het oog de
     volgende regel kwijt. */
  --aqc-meet: 66ch;
}

/* ==========================================================================
   Lettertypen, lokaal gehost

   Zelf hosten in plaats van via Google: scheelt een verbinding met een
   externe host bij elke paginaweergave, en er gaat geen bezoekersdata naar
   Google. Beide zijn variabele fonts, dus alle gewichten zitten in een
   bestand. Samen 99 kB voor het volledige bereik.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: 'Archivo';
  src: url('fonts/Archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* ==========================================================================
   Hulpklassen

   Alleen actief op onderdelen die er expliciet om vragen. Zo kan een template
   een voor een om, zonder dat de rest van de site verspringt.
   ========================================================================== */

.aqc-kop { font-family: var(--aqc-kop); font-weight: 600; line-height: 1.12;
           text-wrap: balance; font-variation-settings: "SOFT" 20, "WONK" 0; }
.aqc-tekst { font-family: var(--aqc-body); }
.aqc-cijfers { font-variant-numeric: tabular-nums; }

/* Wie in het systeem heeft ingesteld minder beweging te willen, krijgt die
   niet. Dit geldt voor alles wat hieronder nog gebouwd wordt. */
@media (prefers-reduced-motion: reduce) {
  .aqc-beweegt, .aqc-beweegt * {
    transition: none !important;
    animation: none !important;
  }
}