export global DarkPalette {
    out property <[brush]> text: [#78716c, #a8a29e, #d6d3d1, #e7e5e4, #fafaf9];
    out property <[brush]> background: [#0c0a09, #1c1917, #292524, #44403c, #57534e];
    out property <[brush]> primary: [#083344, #164e63, #155e75, #0e7490, #0891b2];
    out property <[brush]> secondary: [#44403c, #57534e, #78716c, #a8a29e, #d6d3d1];
    out property <[brush]> accent: [#4c1d95, #5b21b6, #6d28d9, #7c3aed, #8b5cf6];
}

export global LightPalette {
    out property <[brush]> text: [#57534e, #44403c, #292524, #1c1917, #0c0a09];
    out property <[brush]> background: [#fafaf9, #e7e5e4, #d6d3d1, #a8a29e, #78716c];
    out property <[brush]> primary: [#06b6d4, #0891b2, #0e7490, #155e75, #164e63];
    out property <[brush]> secondary: [#a8a29e, #78716c, #57534e, #44403c, #292524];
    out property <[brush]> accent: [#8b5cf6, #7c3aed, #6d28d9, #5b21b6, #4c1d95];
}

export global Metrics {
    out property <length> padding-sm: 4px;
    out property <length> padding-md: 8px;
    out property <length> padding-lg: 16px;
    out property <length> padding-xl: 24px;

    out property <length> spacing-sm: 4px;
    out property <length> spacing-md: 8px;
    out property <length> spacing-lg: 16px;
    out property <length> spacing-xl: 24px;

    out property <length> size-sm: 16px;
    out property <length> size-md: 24px;
    out property <length> size-lg: 32px;
    out property <length> size-xl: 48px;

    out property <length> radius-sm: 4px;
    out property <length> radius-md: 8px;
    out property <length> radius-lg: 16px;
    out property <length> radius-xl: 32px;

    out property <length> font-sm: 10px;
    out property <length> font-md: 12px;
    out property <length> font-lg: 16px;
    out property <length> font-xl: 24px;
}