/* ConstructLab Design Tokens v1.0 */

:root {
    /* ── Kleuren ── */
    --cl-graphite:          #22252A;
    --cl-graphite-80:       rgba(34, 37, 42, 0.8);
    --cl-graphite-60:       rgba(34, 37, 42, 0.6);
    --cl-graphite-40:       rgba(34, 37, 42, 0.4);
    --cl-graphite-10:       rgba(34, 37, 42, 0.1);
    --cl-graphite-05:       rgba(34, 37, 42, 0.05);

    --cl-warm-white:        #F6F4F1;
    --cl-warm-white-dark:   #EDE9E3;
    --cl-warm-white-darker: #E2DDD6;

    --cl-steel-blue:        #6E8396;
    --cl-steel-blue-light:  #8FA5B8;
    --cl-steel-blue-dark:   #556B7D;

    --cl-text:              #111111;
    --cl-text-secondary:    #555555;
    --cl-text-muted:        #888888;

    --cl-border:            #E6E3DD;
    --cl-border-dark:       #D3CFC8;

    --cl-success:           #4B7258;
    --cl-success-light:     #E8F0EC;
    --cl-error:             #C0392B;
    --cl-error-light:       #FCE8E6;

    --cl-white:             #FFFFFF;

    /* ── Typografie ── */
    --cl-font:              'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --cl-text-xs:           0.75rem;       /* 12px */
    --cl-text-sm:           0.875rem;      /* 14px */
    --cl-text-base:         1rem;          /* 16px */
    --cl-text-lg:           1.125rem;      /* 18px */
    --cl-text-xl:           1.25rem;       /* 20px */
    --cl-text-2xl:          1.5rem;        /* 24px */
    --cl-text-3xl:          1.875rem;      /* 30px */
    --cl-text-4xl:          2.25rem;       /* 36px */
    --cl-text-5xl:          3rem;          /* 48px */
    --cl-text-6xl:          3.75rem;       /* 60px */

    /* Fluid — krimpen op mobiel */
    --cl-h1:                clamp(2.25rem, 5vw + 1rem, 3.75rem);
    --cl-h2:                clamp(1.625rem, 3vw + 0.5rem, 2.25rem);
    --cl-h3:                clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
    --cl-h4:                1.125rem;

    --cl-weight-regular:    400;
    --cl-weight-medium:     500;
    --cl-weight-semibold:   600;
    --cl-weight-bold:       700;

    --cl-leading-tight:     1.1;
    --cl-leading-snug:      1.2;
    --cl-leading-normal:    1.5;
    --cl-leading-relaxed:   1.65;

    --cl-tracking-tight:    -0.02em;
    --cl-tracking-snug:     -0.01em;
    --cl-tracking-wide:     0.04em;
    --cl-tracking-wider:    0.08em;

    /* ── Spacing (8px grid) ── */
    --cl-space-1:           0.25rem;   /*  4px */
    --cl-space-2:           0.5rem;    /*  8px */
    --cl-space-3:           0.75rem;   /* 12px */
    --cl-space-4:           1rem;      /* 16px */
    --cl-space-5:           1.25rem;   /* 20px */
    --cl-space-6:           1.5rem;    /* 24px */
    --cl-space-8:           2rem;      /* 32px */
    --cl-space-10:          2.5rem;    /* 40px */
    --cl-space-12:          3rem;      /* 48px */
    --cl-space-14:          3.5rem;    /* 56px */
    --cl-space-16:          4rem;      /* 64px */
    --cl-space-20:          5rem;      /* 80px */
    --cl-space-24:          6rem;      /* 96px */
    --cl-space-28:          7rem;      /* 112px */
    --cl-space-32:          8rem;      /* 128px */

    /* Sectie padding */
    --cl-section-y:         clamp(var(--cl-space-16), 8vw, var(--cl-space-32));
    --cl-section-y-sm:      clamp(var(--cl-space-12), 6vw, var(--cl-space-24));

    /* ── Border ── */
    --cl-radius-xs:         2px;
    --cl-radius-sm:         4px;
    --cl-radius:            8px;
    --cl-radius-lg:         12px;
    --cl-radius-xl:         16px;
    --cl-radius-2xl:        24px;
    --cl-radius-full:       9999px;

    /* ── Schaduw ── */
    --cl-shadow-xs:         0 1px 2px rgba(34, 37, 42, 0.06);
    --cl-shadow-sm:         0 1px 4px rgba(34, 37, 42, 0.08);
    --cl-shadow:            0 2px 8px rgba(34, 37, 42, 0.08), 0 1px 3px rgba(34, 37, 42, 0.06);
    --cl-shadow-md:         0 4px 16px rgba(34, 37, 42, 0.10), 0 2px 6px rgba(34, 37, 42, 0.05);
    --cl-shadow-lg:         0 8px 32px rgba(34, 37, 42, 0.12), 0 4px 12px rgba(34, 37, 42, 0.06);

    /* ── Transitie ── */
    --cl-ease:              cubic-bezier(0.4, 0, 0.2, 1);
    --cl-transition:        200ms var(--cl-ease);
    --cl-transition-slow:   350ms var(--cl-ease);

    /* ── Z-index ── */
    --cl-z-base:            1;
    --cl-z-dropdown:        100;
    --cl-z-sticky:          200;
    --cl-z-header:          300;
    --cl-z-overlay:         400;
    --cl-z-modal:           500;

    /* ── Layout ── */
    --cl-max-width:         1200px;
    --cl-content-width:     720px;
    --cl-narrow-width:      640px;
    --cl-container-pad:     clamp(var(--cl-space-4), 5vw, var(--cl-space-12));
    --cl-nav-height:        72px;
}

/* ── Dark section overrides ── */
.cl-section--dark,
.cl-hero {
    --cl-text:            #F6F4F1;
    --cl-text-secondary:  rgba(246, 244, 241, 0.75);
    --cl-text-muted:      rgba(246, 244, 241, 0.5);
    --cl-border:          rgba(246, 244, 241, 0.12);
}