/* =============================================================================
   kof-tokens.css — Design tokens (custom properties only, no rules).
   v2.0.0
   ----------------------------------------------------------------------------
   Conventions:
   - Spacing in 2px jumps (0.125rem) up to 8 (1rem), then 12, 16, 20, 24, 32.
   - Type scale strict: h1=24, h2=18, h3=16, body=14 (in rem).
   - 0 shadows by default (Notion-stijl). Optional --kof-shadow-* available.
   - Borders default 0.5px ("hairline"). Browsers render 1px on non-retina.
   ----------------------------------------------------------------------------
   Scope: applied to .kof-root and anything inside it. Never global.
   ============================================================================= */

.kof-root {
    /* ===== Colors ===== */
    --kof-color-brand:          #E04E2C;
    --kof-color-brand-hover:    #C13E1F;
    --kof-color-brand-soft:     #FEF1ED;

    --kof-color-ink:            #0E0E10;          /* primary text */
    --kof-color-text:           #212121;          /* body text */
    --kof-color-text-muted:     #6B6963;          /* secondary text */
    --kof-color-text-soft:      #9B9893;          /* tertiary, captions */

    --kof-color-surface:        #FFFFFF;
    --kof-color-surface-alt:    #FAFAF7;          /* page background */
    --kof-color-surface-sub:    #F5F5F4;          /* inset / hover */

    --kof-color-border:         #E7E5E0;          /* default border */
    --kof-color-border-strong:  #D4D2CD;
    --kof-color-border-soft:    rgba(0,0,0,0.06);

    --kof-color-sidebar-bg:     #1c1c1c;
    --kof-color-sidebar-fg:     #f5f5f5;
    --kof-color-sidebar-fg-muted:#9a9a9a;
    --kof-color-sidebar-hover:  #2a2a2a;
    --kof-color-sidebar-active: #333333;

    --kof-color-success:        #16A34A;
    --kof-color-warning:        #D97706;
    --kof-color-danger:         #DC2626;
    --kof-color-info:           #2563EB;

    /* Status palette (project lifecycle). Soft bg + ink fg. */
    --kof-status-lead-bg:           #F1F5F9;  --kof-status-lead-fg:           #475569;
    --kof-status-offerte-bg:        #FEF3C7;  --kof-status-offerte-fg:        #92400E;
    --kof-status-geaccepteerd-bg:   #DCFCE7;  --kof-status-geaccepteerd-fg:   #166534;
    --kof-status-ingepland-bg:      #DBEAFE;  --kof-status-ingepland-fg:      #1E40AF;
    --kof-status-uitgevoerd-bg:     #E0E7FF;  --kof-status-uitgevoerd-fg:     #3730A3;
    --kof-status-gefactureerd-bg:   #FCE7F3;  --kof-status-gefactureerd-fg:   #9D174D;
    --kof-status-afgerond-bg:       #E5E5E5;  --kof-status-afgerond-fg:       #404040;

    /* ===== Typography ===== */
    --kof-font-family:         'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --kof-font-family-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Strict scale */
    --kof-font-size-xs:        0.6875rem;   /* 11px — captions, labels */
    --kof-font-size-sm:        0.8125rem;   /* 13px — secondary text */
    --kof-font-size-base:      0.875rem;    /* 14px — body */
    --kof-font-size-h3:        1rem;        /* 16px */
    --kof-font-size-h2:        1.125rem;    /* 18px */
    --kof-font-size-h1:        1.5rem;      /* 24px */

    --kof-font-weight-regular: 400;
    --kof-font-weight-medium:  500;
    --kof-font-weight-semi:    600;

    --kof-line-tight:          1.25;
    --kof-line-snug:           1.35;
    --kof-line-normal:         1.5;

    --kof-letter-tight:        -0.015em;
    --kof-letter-normal:       0;

    /* ===== Spacing (2px jumps) ===== */
    --kof-space-0:   0;
    --kof-space-1:   0.125rem;   /* 2  */
    --kof-space-2:   0.25rem;    /* 4  */
    --kof-space-3:   0.375rem;   /* 6  */
    --kof-space-4:   0.5rem;     /* 8  */
    --kof-space-5:   0.625rem;   /* 10 */
    --kof-space-6:   0.75rem;    /* 12 */
    --kof-space-7:   0.875rem;   /* 14 */
    --kof-space-8:   1rem;       /* 16 */
    --kof-space-10:  1.25rem;    /* 20 */
    --kof-space-12:  1.5rem;     /* 24 */
    --kof-space-14:  1.75rem;    /* 28 */
    --kof-space-16:  2rem;       /* 32 */
    --kof-space-20:  2.5rem;     /* 40 */
    --kof-space-24:  3rem;       /* 48 */

    /* ===== Border radius ===== */
    --kof-radius-sm:   0.25rem;   /* 4  */
    --kof-radius-md:   0.375rem;  /* 6  — default */
    --kof-radius-lg:   0.5rem;    /* 8  — buttons/cards optional */
    --kof-radius-xl:   0.75rem;   /* 12 — featured cards */
    --kof-radius-full: 9999px;

    /* ===== Borders ===== */
    --kof-border-hair:   0.5px solid var(--kof-color-border);
    --kof-border-thin:   1px solid var(--kof-color-border);
    --kof-border-strong: 1px solid var(--kof-color-border-strong);

    /* ===== Shadows (0 by default, opt-in via class) ===== */
    --kof-shadow-none:  none;
    --kof-shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
    --kof-shadow-md:    0 2px 8px rgba(0,0,0,0.06);

    /* ===== Layout ===== */
    --kof-sidebar-w:        240px;
    --kof-pageheader-h:     56px;
    --kof-content-max:      1400px;

    /* ===== Z-index ===== */
    --kof-z-dropdown:  1000;
    --kof-z-sticky:    1020;
    --kof-z-fixed:     1030;
    --kof-z-modal-bg:  1040;
    --kof-z-modal:     1050;
    --kof-z-popover:   1060;
    --kof-z-tooltip:   1070;
    --kof-z-toast:     1080;

    /* ===== Transitions ===== */
    --kof-transition:  150ms cubic-bezier(0.4, 0, 0.2, 1);
}