/*
 * Didakta Design Tokens
 * Enige bron van waarheid voor alle designs.
 * Pas hier aan; alle HTML-files die deze import gebruiken, volgen automatisch.
 */

:root {

  /* ============================================================
   * KLEUREN
   * ============================================================ */

  /* Merk */
  --color-primary:          #e63312;
  --color-primary-dark:     #c42a0d;  /* hover / active */
  --color-primary-light:    #fce8e4;  /* achtergrond tint */
  --color-secondary:        #0077b5;
  --color-secondary-dark:   #005f8f;

  /* Tekst */
  --color-black:            #1a1a1a;
  --color-text:             #4d5b7c;
  --color-text-muted:       #6c757d;
  --color-text-light:       #ffffff;

  /* Achtergronden */
  --color-bg:               #ffffff;
  --color-bg-alt:           #faf9f7;
  --color-bg-dark:          #172025;

  /* Randen */
  --color-border:           #e9ecef;
  --color-border-focus:     #4d5b7c;

  /* Status */
  --color-success:          #28a745;
  --color-success-bg:       #d4edda;
  --color-warning:          #ffc107;
  --color-warning-bg:       #fff3cd;
  --color-error:            #dc3545;
  --color-error-bg:         #f8d7da;
  --color-info:             #0077b5;
  --color-info-bg:          #d1ecf1;

  /* Overlay */
  --color-overlay:          rgba(23, 32, 37, 0.55);

  /* ============================================================
   * TYPOGRAFIE
   * ============================================================ */

  --font-family:            'Montserrat', sans-serif;

  /* Groottes — rem op 16px basis */
  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-lg:           1.125rem;   /* 18px */
  --font-size-xl:           1.25rem;    /* 20px */
  --font-size-2xl:          1.5rem;     /* 24px */
  --font-size-3xl:          2rem;       /* 32px */
  --font-size-4xl:          2.5rem;     /* 40px */
  --font-size-5xl:          3rem;       /* 48px */

  /* Semantisch alias voor headings */
  --font-size-h1:           var(--font-size-5xl);
  --font-size-h2:           var(--font-size-4xl);
  --font-size-h3:           var(--font-size-3xl);
  --font-size-h4:           var(--font-size-2xl);
  --font-size-h5:           var(--font-size-xl);
  --font-size-h6:           var(--font-size-lg);

  /* Gewichten */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* Regelafstand */
  --line-height-tight:      1.2;
  --line-height-snug:       1.35;
  --line-height-base:       1.5;
  --line-height-relaxed:    1.65;

  /* ============================================================
   * SPACINGS — 8px basisunit
   * ============================================================ */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   2.5rem;    /* 40px */
  --space-8:   3rem;      /* 48px */
  --space-9:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-11:  6rem;      /* 96px */
  --space-12:  8rem;      /* 128px */

  /* Sectie verticale padding */
  --section-padding-y:      var(--space-7);
  --section-padding-y-sm:   var(--space-8);

  /* Container */
  --container-max:          1280px;
  --container-padding:      var(--space-5);

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */

  --radius-sm:              4px;
  --radius-md:              6px;
  --radius-lg:              12px;
  --radius-xl:              20px;
  --radius-pill:            50px;
  --radius-circle:          50%;

  /* ============================================================
   * SCHADUWEN
   * ============================================================ */

  --shadow-sm:    0px 2px 4px 0px rgba(0, 0, 0, 0.075);
  --shadow-md:    0px 8px 16px 0px rgba(0, 0, 0, 0.15);
  --shadow-lg:    0px 24px 64px 0px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(230, 51, 18, 0.25);

  /* ============================================================
   * TRANSITIES
   * ============================================================ */

  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* ============================================================
   * Z-INDEX
   * ============================================================ */

  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;

  /* ============================================================
   * LAYOUT
   * ============================================================ */

  --grid-gap:           var(--space-5);
  --card-padding:       var(--space-5);
  --input-height:       3rem;         /* 48px */
  --input-height-sm:    2.5rem;       /* 40px */
  --topbar-height:      2.5rem;       /* 40px */
  --header-height:      5rem;         /* 80px */
}