/* Font Faces */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
}

:root {
    /* Colors - Base */
    --tr-color-base: #F5F4F2;
    --tr-color-surface: #ECEAE7;
    --tr-color-white: #ffffff;

    /* Colors - Slate Palette */
    --tr-color-slate-900: #0f172a;
    --tr-color-slate-800: #1e293b;
    --tr-color-slate-700: #334155;
    --tr-color-slate-600: #475569;
    --tr-color-slate-500: #64748b;
    --tr-color-slate-400: #94a3b8;
    --tr-color-slate-300: #cbd5e1;
    --tr-color-slate-200: #e2e8f0;
    --tr-color-slate-100: #f1f5f9;

    /* Colors - Primary */
    --tr-color-primary: #10b981;
    --tr-color-primary-hover: #059669;
    --tr-color-primary-light: rgba(16, 185, 129, 0.1);

    /* Colors - Info hover */
    --tr-color-info-hover: #2563eb;

    /* Colors - Warning/Error hover */
    --tr-color-warning-hover: #d97706;
    --tr-color-error-hover: #e11d48;

    /* Colors - Status */
    --tr-color-status-excellent: #10b981;
    --tr-color-status-good: #14b8a6;
    --tr-color-status-attention: #f59e0b;
    --tr-color-status-improve: #f43f5e;

    --tr-color-success: #10b981;
    --tr-color-success-bg: rgba(16, 185, 129, 0.1);
    --tr-color-success-light: #dcfce7;
    --tr-color-warning: #f59e0b;
    --tr-color-warning-bg: rgba(245, 158, 11, 0.1);
    --tr-color-warning-light: #fef3c7;
    --tr-color-error: #f43f5e;
    --tr-color-error-bg: rgba(244, 63, 94, 0.1);
    --tr-color-error-light: #fee2e2;
    --tr-color-info: #64748b;
    --tr-color-info-bg: rgba(100, 116, 139, 0.1);
    --tr-color-info-light: #f1f5f9;

    /* Accentkleuren voor gebruik OP de bijbehorende -bg-tint.
       De gewone accentkleur is daar niet leesbaar: gemeten op de tint over
       --tr-color-base haalt --tr-color-warning 1,82:1, --tr-color-success
       2,11:1 en --tr-color-info 3,85:1, terwijl 4,5:1 de ondergrens is voor
       tekst en 3:1 die voor een betekenisdragend icoon. Een stap donkerder
       zet ze alle drie rond 6:1 op hun eigen tint (6,02 / 6,40 / 6,13), dus
       een getinte kaart houdt een consistente toon in alle drie de standen.
       Ook op wit halen ze het ruim (7,09 / 7,68 / 7,58).

       Gebruik ze zodra tekst of een icoon op --tr-color-*-bg landt; de
       gewone accentkleur blijft voor vlakken, randen en gevulde tegels waar
       de kleur zelf de achtergrond is.

       Info krijgt bewust geen eigen hex: --tr-color-info is al slate, dus
       dit is een alias op de palette-stap die er toch al ligt, hetzelfde
       patroon als --tr-spacing-* op --tr-space-*.

       Gemeten in ronde 3 van de coexistentiemelding, met de rekenmodule in
       docs/coex-banner-ronde3-mockup.html. */
    --tr-color-warning-on-bg: #92400e;
    --tr-color-success-on-bg: #065f46;
    --tr-color-info-on-bg: var(--tr-color-slate-600);

    /* Typography */
    --tr-font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;

    --tr-text-xs: 0.75rem;
    --tr-text-sm: 0.8125rem;
    --tr-text-base: 0.9375rem;
    --tr-text-lg: 1.125rem;
    --tr-text-xl: 1.25rem;
    --tr-text-2xl: 1.5rem;
    --tr-text-3xl: 2rem;
    --tr-text-4xl: 2.5rem;

    --tr-text-5xl: 3rem;

    --tr-font-regular: 400;
    --tr-font-medium: 500;
    --tr-font-semibold: 600;
    --tr-font-bold: 700;
    --tr-font-extrabold: 800;

    /* Line Heights */
    --tr-leading-tight:   1.25;
    --tr-leading-normal:  1.5;
    --tr-leading-relaxed: 1.625;

    /* Spacing */
    --tr-space-1: 4px;
    --tr-space-2: 8px;
    --tr-space-3: 12px;
    --tr-space-4: 16px;
    --tr-space-5: 20px;
    --tr-space-6: 24px;
    --tr-space-8: 32px;
    --tr-space-10: 40px;
    --tr-space-12: 48px;
    --tr-space-16: 64px;
    --tr-space-20: 80px;
    --tr-space-24: 96px;

    /* Global Spacing Scale (Alias) */
    --tr-spacing-xs: var(--tr-space-2);
    --tr-spacing-sm: var(--tr-space-3);
    --tr-spacing-md: var(--tr-space-4);
    --tr-spacing-lg: var(--tr-space-6);
    --tr-spacing-xl: var(--tr-space-8);

    /* Radius */
    --tr-radius-sm: 4px;
    --tr-radius-md: 8px;
    --tr-radius-lg: 12px;
    --tr-radius-xl: 16px;
    --tr-radius-2xl: 24px;
    --tr-radius-full: 9999px;

    /* Shadow */
    --tr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --tr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --tr-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --tr-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
    --tr-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
    --tr-shadow-primary-hover: 0 4px 16px rgba(16, 185, 129, 0.3);
    --tr-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.2);
    --tr-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.2);

    /* Transition */
    --tr-transition-fast: 150ms ease;
    --tr-transition-base: 200ms ease;
    --tr-transition-slow: 300ms ease;

    /* Z-index */
    --tr-z-dropdown:  100;
    --tr-z-sticky:    200;
    --tr-z-modal-bg:  300;
    --tr-z-modal:     400;
    --tr-z-popover:   500;
    --tr-z-tooltip:   600;
    --tr-z-toast:     700;

    /* Component tokens — Buttons */
    --tr-btn-height-sm: 32px;
    --tr-btn-height-md: 40px;
    --tr-btn-height-lg: 48px;
    --tr-btn-padding-sm: 0 12px;
    --tr-btn-padding-md: 0 16px;
    --tr-btn-padding-lg: 0 24px;
    --tr-btn-border-width: 1px;

    /* Component tokens — Inputs */
    --tr-input-height:  40px;
}