:root {
    /* ── Colors: Dark backgrounds ── */
    --c-bg-dark:        #0f0f0f;
    --c-bg-dark-alt:    #141414;
    --c-bg-dark-card:   #171719;

    /* ── Colors: Light backgrounds ── */
    --c-bg-light:       #f7f7f7;
    --c-bg-light-alt:   #f0f3f5;
    --c-bg-white:       #ffffff;

    /* ── Colors: Text ── */
    --c-text-white:     #ffffff;
    --c-text-dark:      #0f0f0f;
    --c-text-heading:   #222222;
    --c-text-muted:     #7b7b85;
    --c-text-subtle:    #9c9c9c;
    --c-text-faint:     #adadad;

    /* ── Colors: Accent ── */
    --c-accent-purple:  #8892fa;
    --c-accent-blue:    #175dff;
    --c-accent-green:   #00c950;
    --c-accent-pink:    #ff266a;
    --c-accent-violet:  #8A77E0;

    /* ── Colors: Tags / Chips ── */
    --c-chip-bg:        #f7f7f8;
    --c-chip-border:    #e6e7e9;

    /* ── Colors: Borders ── */
    --c-border-dark:    #222222;
    --c-border-light:   #e6e7e9;
    --c-border-subtle:  #dedede;

    /* ── Typography ── */
    --font-primary:     'DM Sans', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-mono:        'Geist Mono', 'Courier New', monospace;
    --font-display:     'DM Sans', sans-serif;

    /* ── Font sizes (desktop) ── */
    --fs-hero:          64px;
    --fs-h1:            48px;
    --fs-h2:            40px;
    --fs-h3:            28px;
    --fs-h4:            22px;
    --fs-body:          17px;
    --fs-body-lg:       20px;
    --fs-small:         14px;
    --fs-caption:       12px;

    /* ── Line heights ── */
    --lh-tight:         1.15;
    --lh-heading:       1.25;
    --lh-body:          1.6;

    /* ── Spacing ── */
    --section-py:       120px;
    --section-py-sm:    80px;
    --container-max:    1168px;
    --container-px:     24px;
    --gap-lg:           64px;
    --gap-md:           40px;
    --gap-sm:           24px;
    --gap-xs:           16px;
    --gap-xxs:          8px;

    /* ── Border Radius ── */
    --r-sm:             8px;
    --r-md:             12px;
    --r-lg:             16px;
    --r-xl:             24px;

    /* ── Transitions ── */
    --transition:       0.2s ease;
    --transition-slow:  0.4s ease;
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
    :root {
        --fs-hero:      36px;
        --fs-h1:        32px;
        --fs-h2:        28px;
        --fs-h3:        22px;
        --fs-h4:        18px;
        --fs-body:      16px;
        --fs-body-lg:   18px;
        --section-py:   64px;
        --section-py-sm: 48px;
        --container-px: 16px;
        --gap-lg:       40px;
        --gap-md:       24px;
    }
}