/*
@property --bluelib-block-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 12px;
}

@property --bluelib-inline-gap {
    syntax: "<length>";
    inherits: true;
    initial-value: 24px;
}

@property --bluelib-roundness {
    syntax: "<length>";
    inherits: true;
    initial-value: 8px;
}

@property --bluelib-thickness {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
}

@property --bluelib-main-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 1024px;
}

@property --bluelib-fill-color {
    syntax: "<color>";
    inherits: true;
    initial-value: Canvas;
}

@property --bluelib-rim-color {
    syntax: "<color>";
    inherits: true;
    initial-value: AccentColor;
}

@property --bluelib-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: CanvasText;
}

@property --bluelib-interactable-color {
    syntax: "<color>";
    inherits: true;
    initial-value: LinkText;
}

@property --bluelib-interacting-color {
    syntax: "<color>";
    inherits: true;
    initial-value: ActiveText;
}
*/

body {
    --bluelib-block-gap: 12px;
    --bluelib-inline-gap: calc(var(--bluelib-block-gap) * 2);
    --bluelib-roundness: 8px;
    --bluelib-thickness: 2px;
    --bluelib-main-width: 1024px;
    --bluelib-fill-color: Canvas;
    --bluelib-rim-color: AccentColor;
    --bluelib-text-color: CanvasText;
    --bluelib-interactable-color: LinkText;
    --bluelib-interacting-color: ActiveText;
}

@media screen and (forced-colors: none) {
    body {
        --bluelib-fill-color: color-mix(in srgb, AccentColor 10%, transparent);
    }
}