@layer reset, base, components, modules, utilities, platform;

:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Spacing */
    --inline-space: 1ch;
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);
    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);

    /* Colors */
    --color-black: 0% 0 0;
    --color-white: 100% 0 0;

    --color-base-content: oklch(20% 0.05 54);
    --color-base-50: oklch(98.6% 0.002 67.8);
    --color-base-100: oklch(87% 0.005 54.3);
    --color-base-200: oklch(67% 0.005 41.2);
    --color-base-300: oklch(54.7% 0.021 43.1);

    --color-primary: oklch(58% 0.25 35);

    --color-canvas: oklch(98.6% 0.002 67.8);
    --color-darker: oklch(92.2% 0.005 34.3);

    --border: 1px solid var(--color-base-100);
    --radius: 1em;

    --shadow: 0 0 0 1px oklch(var(--color-black) / 5%),
              0 0.1em 0.1em oklch(var(--color-black) / 5%),
              0 0.2em 0.2em oklch(var(--color-black) / 5%),
              0 0.4em 0.4em oklch(var(--color-black) / 5%);

    --flash-background: var(--color-base-content);
    --flash-color: var(--color-base-50);
}