/**
 * Developercode — design-system tokens, ingevuld met de huisstijl van
 * Yakup Stucadoors. De namen volgen de reference; alleen de waarden zijn
 * die van de klant.
 */

:root {
    /* === COLORS === */
    --dc-primary: #b2a590;
    --dc-primary-rgb: 178, 165, 144;
    --dc-primary-light: #cfc5b4;
    --dc-primary-dark: #8c7f69;

    --dc-secondary: #0058e6;
    --dc-secondary-rgb: 0, 88, 230;

    --dc-accent: #ffc402;
    --dc-accent-rgb: 255, 196, 2;

    --dc-warning: #b45309;
    --dc-warning-rgb: 180, 83, 9;

    --dc-error: #c62828;
    --dc-error-rgb: 198, 40, 40;

    --dc-success: #2e7d32;
    --dc-success-rgb: 46, 125, 50;

    /* === DARK CANVAS === */
    --dc-canvas-dark: #181d23;
    --dc-canvas-medium: #232a32;
    --dc-canvas-light: #333b45;
    --dc-canvas-border: rgba(255, 255, 255, 0.1);
    --dc-canvas-text: rgba(255, 255, 255, 0.92);
    --dc-canvas-text-muted: rgba(255, 255, 255, 0.64);

    /* === LIGHT MODE === */
    --dc-bg: #ffffff;
    --dc-bg-rgb: 255, 255, 255;
    --dc-bg-alt: #f6f3ee;
    --dc-surface: #ffffff;
    --dc-border: #e6e0d6;
    --dc-border-light: #f1ede6;

    /* === TEXT === */
    --dc-title: #181d23;
    --dc-title-rgb: 24, 29, 35;
    --dc-text: #4a4f57;
    --dc-text-light: #6b7079;

    /* === SPACING === */
    --dc-space-xs: 4px;
    --dc-space-sm: 8px;
    --dc-space-md: 16px;
    --dc-space-lg: 24px;
    --dc-space-xl: 32px;
    --dc-space-2xl: 48px;
    --dc-space-3xl: 64px;
    --dc-space-4xl: 96px;
    --dc-section-y: clamp(64px, 9vw, 128px);
    --dc-gutter: clamp(20px, 5vw, 64px);
    --dc-max: 1280px;

    /* === TYPOGRAPHY === */
    --dc-font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dc-font-heading: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dc-font-mono: "SF Mono", Menlo, monospace;

    --dc-text-xs: 12px;
    --dc-text-sm: 14px;
    --dc-text-base: clamp(15px, 0.35vw + 14px, 17px);
    --dc-text-lg: clamp(17px, 0.5vw + 15px, 20px);
    --dc-text-xl: clamp(20px, 0.8vw + 17px, 24px);
    --dc-text-2xl: clamp(24px, 1.4vw + 19px, 32px);
    --dc-text-3xl: clamp(28px, 2.4vw + 18px, 46px);
    --dc-text-4xl: clamp(34px, 4vw + 16px, 68px);
    --dc-text-5xl: clamp(36px, 5vw + 14px, 84px);

    --dc-leading-tight: 1.1;
    --dc-leading-normal: 1.5;
    --dc-leading-relaxed: 1.7;

    /* === BORDER RADIUS === */
    --dc-radius-sm: 4px;
    --dc-radius-md: 8px;
    --dc-radius-lg: 14px;
    --dc-radius-xl: 20px;
    --dc-radius-2xl: 28px;
    --dc-radius-full: 9999px;

    /* === SHADOWS === */
    --dc-shadow-sm: 0 1px 2px rgba(24, 29, 35, 0.05);
    --dc-shadow-md: 0 6px 16px rgba(24, 29, 35, 0.06);
    --dc-shadow-lg: 0 18px 40px rgba(24, 29, 35, 0.09);
    --dc-shadow-xl: 0 30px 70px rgba(24, 29, 35, 0.14);
    --dc-shadow-glow: 0 0 0 4px rgba(var(--dc-primary-rgb), 0.28);
    --dc-shadow-glow-lg: 0 14px 34px rgba(var(--dc-primary-rgb), 0.45);

    /* === ANIMATIONS === */
    --dc-duration-fast: 0.18s;
    --dc-duration-normal: 0.24s;
    --dc-duration-slow: 0.6s;
    --dc-duration-flow: 1.2s;
    --dc-ease-default: cubic-bezier(0.22, 1, 0.36, 1);
    --dc-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === Z-INDEX === */
    --dc-z-base: 1;
    --dc-z-elevated: 10;
    --dc-z-overlay: 100;
    --dc-z-modal: 1000;
}