/* ============================================================
   design-tokens.css — single source of truth voor de Apple-cream
   design-taal die gebruikt wordt op content-area + emails + blog
   (fase 12). Payment-flow.css heeft een EIGEN Apple-system token
   set (--bg-page #F5F5F7, --accent #007AFF) die historisch is
   afgestemd op de admin panel en mag niet met deze tokens botsen.

   Scope van deze file:
   - Cars listing content-area, car detail, CMS pages, blog content
   - Email HTML (hardcoded hex; CSS vars werken niet in Outlook/Gmail,
     maar de hex-waardes hier zijn de afgesproken bron)

   Buiten scope:
   - Donkerblauwe site header + oranje search bar (bewust behouden)
   - Admin panel (eigen apple-admin.css)
   - Payment/choose + payment/confirmation (eigen Apple-system set)
   ============================================================ */

:root {
  /* Surface colors — cream Apple-style */
  --a22-cream:      #F7F3EC;
  --a22-cream-deep: #EFE8DC;
  --a22-white:      #FFFFFF;
  --a22-line:       #E5DFD3;

  /* Ink color scale — text */
  --a22-ink:        #0F0F0F;
  --a22-ink-soft:   #3A3A3A;
  --a22-ink-mute:   #6B6B6B;

  /* Accent — primary is BLAUW (#2563EB), niet terracotta.
     Site header blijft donkerblauw (#12396b-range), niet deze primary. */
  --a22-primary:      #2563EB;
  --a22-primary-deep: #1E4FC5;
  --a22-primary-tint: rgba(37, 99, 235, 0.10);

  /* Status colors */
  --a22-sage:       #5C7A6A;   /* succes, confirmed */
  --a22-sage-deep:  #41594C;
  --a22-gold:       #B8935A;   /* warning, pending */
  --a22-danger:     #DC2626;   /* cancelled, errors */
  --a22-warning:    #D97706;

  /* Radius scale */
  --a22-radius-sm: 6px;
  --a22-radius-md: 12px;
  --a22-radius-lg: 20px;
  --a22-radius-xl: 28px;

  /* Shadow scale */
  --a22-shadow-sm: 0 1px 2px rgba(15,15,15,0.04);
  --a22-shadow-md: 0 4px 12px rgba(15,15,15,0.06);
  --a22-shadow-lg: 0 24px 48px -12px rgba(15,15,15,0.12);

  /* Motion */
  --a22-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --a22-duration: 0.25s;

  /* Typography — auto-22.ma gebruikt Poppins site-wide (SemiBold 600 op
     titels, Regular 400 op body). Fraunces/Manrope was een misstap uit
     eerdere redesign-ronde; Poppins matcht photoshop font-match van de
     bestaande payment-page kop. */
  --a22-font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --a22-font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --a22-weight-title:    600;
  --a22-weight-subtitle: 500;
  --a22-weight-body:     400;
}

/* Globale accent-class: vervangt de <em> italic-accent patronen uit
   blog/payment redesigns. Poppins italic is niet karakteristiek genoeg
   voor dezelfde feel — kleur doet nu het werk. */
.accent,
.a22-accent {
  color: var(--a22-primary);
  font-weight: var(--a22-weight-title);
  font-style: normal;
}