﻿:root {
    /* Achtergrond */
    --background-color-primary: #ffffff;
    --background-color-secondary: #f6f6f7;
    --background-color-tertiary: #242037;
    --background-color-blue-10: #FAE9E8; /* #CF221B - 10% op #FFFFFF */
    --background-color-blue-20: #F5D3D1; /* #CF221B - 20% op #FFFFFF */
    --background-color-blue-40: #ECA7A4; /* #CF221B - 40% op #FFFFFF */
    --background-color-blue-60: #E27A76; /* #CF221B - 60% op #FFFFFF */
    /* Accent (rood) */
    --accent-color-primary: #CF221B;
    --accent-color-primary-d20: #A61B16; /* #000000 - 20% */
    --accent-color-primary-d40: #7C1410; /* #000000 - 40% */
    --accent-color-primary-d60: #530E0B; /* #000000 - 60% */
    --accent-color-primary-l20: #D94E49; /* #FFFFFF - 20% */
    --accent-color-primary-l40: #E27A76; /* #FFFFFF - 40% */
    --accent-color-primary-l60: #ECA7A4; /* #FFFFFF - 60% */
    --accent-color-primary-l90: #FAE9E8; /* #FFFFFF - 90% */
    /* Status: success */
    --status-color-success: #2CA878;
    --status-color-success-d20: #238660;
    --status-color-success-d40: #1A6548;
    --status-color-success-d60: #124330;
    --status-color-success-l20: #56B993;
    --status-color-success-l40: #80CBAE;
    --status-color-success-l60: #ABDCC9;
    --status-color-success-l90: #EAF6F2;
    /* Status: error */
    --status-color-error: #BE1621;
    --status-color-error-d20: #98121A;
    --status-color-error-d40: #720D14;
    --status-color-error-d60: #4C090D;
    --status-color-error-l20: #CB454D;
    --status-color-error-l40: #D8737A;
    --status-color-error-l60: #E5A2A6;
    --status-color-error-l90: #F9E8E9;
    /* Status: warning */
    --status-color-warning: #EF7F18;
    --status-color-warning-d20: #BF6613;
    --status-color-warning-d40: #8F4C0E;
    --status-color-warning-d60: #60330A;
    --status-color-warning-l20: #F29946;
    --status-color-warning-l40: #F5B274;
    --status-color-warning-l60: #F9CCA3;
    --status-color-warning-l90: #FDF2E8;
    /* Tekst */
    --text-color-primary: #242037;
    --text-color-grey: #9899A5;
    --text-color-white: #ffffff;
    /* Disabled */
    --disabled-color-background: #E5E5E7;
    --disabled-color-foreground: #BFBFC6;
    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;
    /* Schaduwen */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(26, 27, 56, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(26, 27, 56, 0.12);
    --shadow-lg: 0 12px 24px -6px rgba(26, 27, 56, 0.18);
    --shadow-inset-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.18);
    /* Focus */
    --focus-ring-width: 3px;
    --focus-ring-color: rgba(207, 34, 27, 0.35); /* accent - 35% */
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    /* Transities & hover */
    --transition-duration-fast: 120ms;
    --transition-duration-base: 200ms;
    --transition-duration-slow: 320ms;
    --transition-easing: cubic-bezier(0.25, 1, 0.5, 1);
    --transition-base: all var(--transition-duration-base) var(--transition-easing);
    --hover-lift: translateY(-1px);
    --pressed-scale: scale(0.98);
    --disabled-opacity: 1;
    /* Typografie */
    --font-size-h1: clamp(2.5rem, 5.5vw, 4.5rem);
    --font-size-h2: clamp(1.75rem, 3.5vw, 2.5rem);
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.1rem;
    --font-size-h6: 1rem;
    --font-size-body: 1rem;
    --font-size-lead: 1.25rem;
    --font-size-small: 0.875rem;
}
