// Theme agnostic (calculated by system tokens and reference tokens)
// token layer, these still can be override by your custom theme variables
// but in most cases this layer should stay the same since it's calculated
// based on your the main subset of system tokens (see system-tokens.scss)
[data-sg-root] {
    // Font scale (with base font-size of 16px)
    --sg-sys-font-size-100: calc(var(--sg-sys-font-size) * 0.625); /* 10px */
    --sg-sys-font-size-200: calc(var(--sg-sys-font-size) * 0.6875); /* 11px */
    --sg-sys-font-size-300: calc(var(--sg-sys-font-size) * 0.8125); /* 13px */
    --sg-sys-font-size-400: calc(var(--sg-sys-font-size) * 0.875); /* 14px */
    --sg-sys-font-size-500: calc(var(--sg-sys-font-size) * 1); /* 16px */
    --sg-sys-font-size-600: calc(var(--sg-sys-font-size) * 1.125); /* 18px */
    --sg-sys-font-size-700: calc(var(--sg-sys-font-size) * 1.1875); /* 19px */
    --sg-sys-font-size-800: calc(var(--sg-sys-font-size) * 1.3125); /* 21px */
    --sg-sys-font-size-900: calc(var(--sg-sys-font-size) * 1.375); /* 22px */
    --sg-sys-font-size-1000: calc(var(--sg-sys-font-size) * 1.5); /* 24px */
    --sg-sys-font-size-1100: calc(var(--sg-sys-font-size) * 2); /* 32px */
    --sg-sys-font-size-1200: calc(var(--sg-sys-font-size) * 2.5); /* 40px */

    // Space Scale
    --sg-sys-space-100: calc(var(--sg-sys-space) * 0.25); /* 4px */
    --sg-sys-space-200: calc(var(--sg-sys-space) * 0.5); /* 8px */
    --sg-sys-space-300: calc(var(--sg-sys-space) * 0.75); /* 12px */
    --sg-sys-space-400: var(--sg-sys-space); /* 16px */
    --sg-sys-space-500: calc(var(--sg-sys-space) * 1.5); /* 24px */
    --sg-sys-space-600: calc(var(--sg-sys-space) * 2); /* 32px */
    --sg-sys-space-700: calc(var(--sg-sys-space) * 2.5); /* 40px */
    --sg-sys-space-800: calc(var(--sg-sys-space) * 3); /* 48px */
    --sg-sys-space-900: calc(var(--sg-sys-space) * 3.5); /* 56px */
    --sg-sys-space-1000: calc(var(--sg-sys-space) * 4); /* 64px */

    // Border radius
    --sg-sys-border-radius-200: calc(var(--sg-sys-border-radius) * 2);
    --sg-sys-border-radius-300: calc(var(--sg-sys-border-radius) * 3);
    --sg-sys-border-radius-400: calc(var(--sg-sys-border-radius) * 4);

    // Borders
    --sg-sys-border-active-color: var(--sg-sys-accent);
    --sg-sys-border-color-hover: color-mix(
        in oklch,
        var(--sg-sys-border-color),
        white 50%
    );

    // Focus ring shadows
    --sg-sys-focus-shadow: 0 0 0 3px
        color-mix(in oklch, var(--sg-sys-accent) 65%, transparent);
    --sg-sys-focus-shadow-inset: 0 0 0 3px var(--sg-sys-accent) inset;

    // Shadows
    --sg-sys-shadow-100: 0 1px 2px 0 var(--sg-sys-shadow-color);
    --sg-sys-shadow-200:
        0 1px 3px 0 var(--sg-sys-shadow-color),
        0 1px 2px -1px var(--sg-sys-shadow-color);
    --sg-sys-shadow-300:
        0 4px 6px -1px var(--sg-sys-shadow-color),
        0 2px 4px -2px var(--sg-sys-shadow-color);
    --sg-sys-shadow-400:
        0 10px 15px -3px var(--sg-sys-shadow-color),
        0 4px 6px -4px var(--sg-sys-shadow-color);
    --sg-sys-shadow-500:
        0 20px 25px -5px var(--sg-sys-shadow-color),
        0 8px 10px -6px var(--sg-sys-shadow-color);
}