/* ============================================
   BRAND VARIABELEN — Gegenereerd voor Klussenbedrijf Arif
   ============================================ */

:root {
  /* ── Basiskleuren ── */
  --color-primary:      #262424;
  --color-accent:       #c0894a;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f9f9f9;
  --color-text:         #1a1a1a;
  --color-text-muted:   #6c757d;

  /* ── Sectie achtergronden (globaal donker / licht) ── */
  --dark-bg:  #787474;
  --light-bg: #fafaf8;

  /* ── Afgeleide kleuren ── */
  --color-surface:      white;
  --color-border:       rgba(0, 0, 0, 0.08);

  /* ── Alpha varianten ── */
  --color-accent-10:    color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-accent-15:    color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-accent-20:    color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-primary-10:   color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-primary-15:   color-mix(in srgb, var(--color-primary) 15%, transparent);
  --color-primary-80:   color-mix(in srgb, var(--color-primary) 80%, transparent);

  /* ── Typografie ── */
  --font-heading:       'Archivo', sans-serif;
  --font-body:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-size-base:     1rem;
  --line-height-base:   1.65;

  /* ── Spacing (4px basis) ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  7rem;

  /* ── Layout ── */
  --max-width:  1280px;

  /* ── Border radius ── */
  --border-radius-sm:   calc(8px / 2);
  --border-radius:      8px;
  --border-radius-lg:   calc(8px * 2);
  --border-radius-xl:   calc(8px * 3);

  /* ── Schaduwen ── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow:         var(--shadow-md);
  --shadow-hover:   var(--shadow-lg);

  /* ── Transities ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition:        var(--transition-base);
}