/**
 * DoGoodWP — Design Tokens
 *
 * CSS custom properties voor het volledige formulier design systeem.
 * Beheerders kunnen waarden overschrijven via de "Formulier stijl" instellingenpagina.
 * Handmatige override in theme CSS: .dogoodwp-form { --dg-primary: #e63946; }
 *
 * @package DoGoodWP
 */

.dogoodwp-form {
  /* Achtergronden */
  --dg-background:       #ffffff;   /* formulier/kaart achtergrond */
  --dg-input-background: #ffffff;   /* invoervelden achtergrond (blijft zichtbaar zonder formulier bg) */
  --dg-surface:          #f9fafb;   /* verdiept vlak: invoerveld bg, disabled, zebra */
  --dg-surface-2:        #f3f4f6;   /* nog dieper: hover op surface */

  /* Tekst */
  --dg-foreground:         #111827;   /* primaire tekst */
  --dg-muted-foreground:   #6b7280;   /* hulptekst, labels, placeholders */
  --dg-subtle-foreground:  #9ca3af;   /* watermerken, placeholder tekst */

  /* Primaire kleur */
  --dg-primary:            #2563eb;
  --dg-primary-foreground: #ffffff;
  --dg-primary-hover:      #1d4ed8;

  /* Secundaire kleur */
  --dg-secondary:            #f3f4f6;
  --dg-secondary-foreground: #374151;
  --dg-secondary-hover:      #e5e7eb;

  /* Randen */
  --dg-border: #e5e7eb;   /* standaard rand overal */
  --dg-input:  #dce0e6;   /* rand van invoervelden (iets sterker) */
  --dg-ring:   #2563eb;   /* focus ring — zelfde als primary */

  /* Randdikte */
  --dg-border-width: 1px;

  /* Feedback */
  --dg-destructive:            #ef4444;
  --dg-destructive-foreground: #ffffff;
  --dg-success:                #22c55e;
  --dg-success-foreground:     #ffffff;
  --dg-warning:                #f59e0b;
  --dg-warning-foreground:     #ffffff;

  /* Vorm tokens - schaalt mee met font-size */
  --dg-radius:      0.5em;
  --dg-radius-sm:   calc(var(--dg-radius) - 0.125em);
  --dg-radius-lg:   calc(var(--dg-radius) + 0.25em);
  --dg-radius-xl:   calc(var(--dg-radius) + 0.5em);
  --dg-radius-full: 9999px;

  /* Typografie */
  --dg-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                     Roboto, Helvetica, Arial, sans-serif;
  --dg-font-size:   16px;                                    /* Base font-size (instelbaar door beheerder) */
  --dg-font-size-sm: calc(var(--dg-font-size) * 0.875);     /* 14px bij 16px base */
  --dg-font-size-xs: calc(var(--dg-font-size) * 0.75);      /* 12px bij 16px base */
  --dg-font-size-lg: calc(var(--dg-font-size) * 1.125);     /* 18px bij 16px base */
  --dg-font-size-xl: calc(var(--dg-font-size) * 1.25);      /* 20px bij 16px base */
  --dg-line-height:  1.5;

  /* Ruimte - schaalt mee met font-size via em units */
  --dg-space-1:  0.25em;
  --dg-space-2:  0.5em;
  --dg-space-3:  0.75em;
  --dg-space-4:  1em;
  --dg-space-5:  1.25em;
  --dg-space-6:  1.5em;
  --dg-space-8:  2em;
  --dg-space-10: 2.5em;

  /* Component tokens */
  --dg-form-width: 640px;
  --dg-form-border-width:  var(--dg-border-width);
  --dg-form-divider-width: var(--dg-border-width);
  --dg-field-gap:    var(--dg-space-4);
  --dg-section-gap:  var(--dg-space-6);
  --dg-form-padding: var(--dg-space-6);
  --dg-amounts-cols:  3;
  --dg-packages-cols: 1;

  --dg-input-height:    2.5em;
  --dg-input-height-sm: 2em;
  --dg-input-height-lg: 3em;

  --dg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --dg-shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --dg-shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --dg-ring-width:  2px;
  --dg-ring-offset: 2px;
  --dg-transition:  150ms ease;
}