:root {
    /* --- cores --- */
    --color-primary:         #000000;
    --color-primary-active:  #1a1a1a;
    --color-ink:             #171717;
    --color-body:            #60646c;
    --color-muted:           #999999;
    --color-muted-soft:      #cccccc;
    --color-text-link:       #0d74ce;
    --color-canvas:          #ffffff;
    --color-canvas-soft:     #fafafa;
    --color-surface-card:    #ffffff;
    --color-surface-strong:  #f0f0f3;
    --color-surface-dark:    #171717;
    --color-surface-dark-elevated: #1a1a1a;
    --color-hairline:        #f0f0f3;
    --color-hairline-soft:   #f5f5f7;
    --color-hairline-strong: #dcdee0;
    --color-on-primary:      #ffffff;
    --color-on-dark:         #ffffff;
    --color-on-dark-soft:    #b0b4ba;
    --color-success:         #16a34a;
    --color-error:           #eb8e90;
    --color-error-bg:        #fff1f1;
    --color-warning:         #ab6400;
    --color-warning-bg:      #fff8ec;
    --color-success-bg:      #f0fdf4;

    /* --- border radius --- */
    --rounded-xs:   4px;
    --rounded-sm:   6px;
    --rounded-md:   8px;
    --rounded-lg:   12px;
    --rounded-xl:   16px;
    --rounded-xxl:  24px;
    --rounded-pill: 9999px;

    /* --- espaçamento --- */
    --space-xxs:  4px;
    --space-xs:   8px;
    --space-sm:   12px;
    --space-base: 16px;
    --space-md:   20px;
    --space-lg:   24px;
    --space-xl:   32px;
    --space-xxl:  48px;
    --space-section: 96px;

    /* --- sombras --- */
    --shadow-card:  0 1px 4px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-modal: 0 8px 32px rgba(0,0,0,0.14);

    /* --- transições --- */
    --transition: 0.18s ease;

    /* --- nav --- */
    --nav-height: 64px;
}