/* Ayni brand overrides for the platform auth login page.
   Auto-loaded by core/auth/login.php when this file exists at /config/auth-theme.css.

   TWEE LAGEN, en de volgorde doet ertoe.

   De loginpagina laadt assets/site.css NIET — dat bestand draagt de hele
   layout van de site en zou deze pagina overschrijven. Daarom vult dit
   bestand het contract zelf in, met dezelfde waarden als assets/site.css.
   Dat is de ene plek waar het palet bewust twee keer staat; wijzig je
   daar een kleur, wijzig hem hier mee.

   Daarna leiden de --auth-* namen zich daarvan af. Dat is het hele punt:
   core/auth/login.php laadt het stijlsjabloon ná dit bestand, dus een
   sjabloon overschrijft --primary en --background en het inlogscherm gaat
   vanzelf mee. */

:root {
  /* ── Het contract, ingevuld (spiegel van assets/site.css) ── */
  --background:         #f6f1ed;   /* --cream */
  --foreground:         #2a2620;   /* --ink   */
  --card:               #f6f1ed;
  --muted-foreground:   #6a635a;   /* --muted */
  --border:             rgba(42, 38, 32, 0.12);
  --primary:            #c0673a;   /* --terra */
  --accent:             #64665b;   /* --green, de tweede merkkleur */
  --destructive:        #9d3b26;
  --radius:             6px;
  --font-heading:       'Cormorant Garamond', Georgia, serif;
  --font-body:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Manrope, sans-serif;

  /* ── De namen die login.css leest, afgeleid van het contract ── */
  --auth-bg:           var(--background);
  /* De kaart is hier bewust LICHTER dan de achtergrond, en --card is op
     deze site gelijk aan --background. Daarom opgelicht in plaats van
     --card: zo blijft het contrast tussen kaart en ondergrond bestaan,
     ook in een sjabloon dat beide dezelfde kleur geeft. */
  --auth-card:         color-mix(in srgb, var(--card) 30%, white);
  --auth-border:       var(--border);
  --auth-shadow:       0 24px 60px color-mix(in srgb, var(--foreground) 15%, transparent);
  --auth-text:         var(--foreground);
  --auth-text-2:       var(--muted-foreground);
  /* Nog een stap zwakker dan --auth-text-2: richting de achtergrond in
     plaats van een derde vaste grijstint. */
  --auth-text-3:       color-mix(in srgb, var(--muted-foreground) 62%, var(--background));
  --auth-accent:       var(--primary);
  --auth-accent-soft:  color-mix(in srgb, var(--primary) 6%, transparent);
  --auth-accent-glow:  color-mix(in srgb, var(--primary) 18%, transparent);
  /* De loginkaart droeg altijd al een rondere hoek dan de site (12 tegen
     6). Afgeleid in plaats van vastgezet, zodat een sjabloon met strakke
     hoeken ook hier strak wordt. */
  --auth-radius:       calc(var(--radius) * 2);
  --auth-error-bg:     color-mix(in srgb, var(--destructive) 8%, transparent);
  --auth-error-border: color-mix(in srgb, var(--destructive) 25%, transparent);
  --auth-error-text:   var(--destructive);
  --auth-serif:        var(--font-heading);
  --auth-sans:         var(--font-body);
}

/* De loginpagina heeft geen themaschakelaar, dus hier telt de voorkeur
   van het systeem. Alleen het palet omklappen is genoeg — de --auth-*
   namen hierboven volgen mee.

   Let op: dit scherm voert een eigen, warmere donkertint dan de site
   (#1f1d1a tegen #3d3024 op de site zelf). Dat was al zo en blijft zo. */
@media (prefers-color-scheme: dark) {
  :root {
    --background:       #1f1d1a;
    --foreground:       #f0ebe2;
    --card:             #25221f;
    --muted-foreground: #b8aa92;
    --border:           rgba(255, 255, 255, 0.08);
    --primary:          #e08a55;   /* --terra in donker */
    --accent:           #2a2018;   /* --green in donker */

    /* Hier is --card al lichter dan de achtergrond, dus geen opgelichte
       variant nodig — en een slagschaduw op donker is zwart, niet het
       merk. */
    --auth-card:        var(--card);
    --auth-shadow:      0 24px 60px rgba(0, 0, 0, 0.4);
  }
}