/* DFG — design tokens */
:root {
    /* Colors */
    --color-bg:          #0a0a0a;
    --color-bg-alt:      #111111;
    --color-bg-soft:     #181818;
    --color-bg-card:     #161616;
    --color-text:        #ffffff;
    --color-text-muted:  rgba(255, 255, 255, 0.65);
    --color-text-dim:    rgba(255, 255, 255, 0.45);
    --color-border:      rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);
    --color-accent:      #f5d300;
    --color-accent-soft: #ffec5c;
    --color-overlay:     rgba(0, 0, 0, 0.55);

    /* Typography */
    --font-heading: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fs-display: clamp(2.5rem, 5vw + 1rem, 5.5rem);
    --fs-h1:      clamp(2rem, 3.2vw + 1rem, 4rem);
    --fs-h2:      clamp(1.6rem, 2vw + 0.8rem, 2.75rem);
    --fs-h3:      clamp(1.25rem, 1vw + 0.8rem, 1.6rem);
    --fs-lg:      1.125rem;
    --fs-md:      1rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.75rem;

    --lh-tight:  1.1;
    --lh-snug:   1.25;
    --lh-normal: 1.5;
    --lh-loose:  1.7;

    /* Spacing */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-10: 128px;

    --section-py: clamp(64px, 8vw, 128px);

    /* Layout */
    --container-max:    1280px;
    --container-pad:    24px;
    --container-pad-md: 16px;

    /* Borders & radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* Motion */
    --ease:       cubic-bezier(.2, .8, .2, 1);
    --ease-in:    cubic-bezier(.4, 0, 1, 1);
    --ease-out:   cubic-bezier(0, 0, .2, 1);
    --dur-fast:   180ms;
    --dur-norm:   320ms;
    --dur-slow:   600ms;

    /* Header */
    --header-h:   72px;
    --header-h-sm: 60px;
}

@media (max-width: 768px) {
    :root {
        --container-pad: 16px;
        --section-py: clamp(48px, 8vw, 80px);
    }
}