@property --color-button-bg {
  syntax: '<color>';
  inherits: true;
}

:root {
    --font-sans: "Bricolage Grotesque", "Lato", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    --color-background-gradient: #5788C736;
    --color-background-base: oklch(from #FAF9F7 calc(l) c h);
    --color-fg: oklch(0.37 0.06 268.12);
    --color-fg-light: oklch(0.53 0.03 269.92);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-green-600: oklch(62.7% 0.194 149.214);

    --color-surface: white;
    --color-surface-dim: oklch(95% 0 0);
    --color-button-bg: var(--color-fg);
    --color-button-bg-hover: oklch(from var(--color-button-bg) calc(l + 0.07) c h);
    --color-button-fg: var(--color-background-base);
    --color-button-fg-hover: white;

    --color-button-subtle-bg: oklch(0.71 0.0349 262.64);
    --color-button-subtle-bg-hover: oklch(from var(--color-button-subtle-bg) calc(l + 0.07) c h);
    --color-border: rgba(24, 33, 47, 0.16);

    --color-error: oklch(0.6825 0.1768 27.64);

    --color-input-bg: oklch(99.5% 0 0);

    --font-size: clamp(1.5rem, 2.225vw, 2rem);
    --font-size-xxxx-small: 50%;
    --font-size-xxx-small: 60%;
    --font-size-xx-small: 70%;
    --font-size-x-small: 80%;
    --font-size-small: 90%;
    --font-size-medium: 100%;
    --font-size-large: 115%;
    --font-size-x-large: 130%;
    --font-size-xx-large: 145%;
    --font-size-xxx-large: 160%;
    --font-size-xxxx-large: 175%;

    --line-height: 1.5;
    --line-height-tight: 1.3;
    --line-height-tighter: 1.2;
    --line-height-tightest: 1.1;

    --inline-space: 1ch;
    --block-space: 1em;

    --space-neutral: 1.5em;
    --space-xxx-small: 0.2em;
    --space-xx-small: 0.4em;
    --space-x-small: 0.6em;
    --space-small: 0.8em;
    --space-medium: 1em;
    --space-large: 2em;
    --space-x-large: 3em;
    --space-xx-large: 4em;
    --space-xxx-large: 5em;

    --font-weight-bolder: 900;

    --font-weight-base: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-x-bold: 800;
    --font-weight-xx-bold: 900;

    --panel-shadow: 0 2px 4px rgba(24, 33, 47, 0.08), 0 12px 24px rgba(31, 58, 95, 0.10);
    --panel-border: 1px solid var(--color-border);
    --border-radius: 1rem;
    --input-shadow: inset 0 0 2px 1px oklch(92.2% 0 0);

    --gradient-background: radial-gradient(ellipse at 50% 50%, var(--color-background-gradient) 0%, var(--color-background-base) 60%);
}

@layer reset, base, layout, components, utilities;