@layer theme {
  @font-face {
    font-family: "Unbounded";
    src: url("/src/fonts/Unbounded-VariableFont_wght.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root,
  :root:not([data-theme]) {
    color-scheme: light;

    --font-sans: "Unbounded", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Unbounded", ui-sans-serif, system-ui, sans-serif;

    --radius-3: var(--radius-2);
    --radius-4: var(--radius-2);

    --shadow-color: 215 13% 34%;

    --color-bg: #f4f5f6;
    --color-surface: hsl(0 0% 100%);
    --color-surface-2: #dee2e6;
    --color-text: #1f252c;
    --color-muted: #47525d;
    --color-border: hsl(208 20% 78%);

    --color-primary: #4c5562;
    --color-primary-hover: #6c7580;
    --color-on-primary: hsl(0 0% 100%);
    --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-bg));

    --color-danger: hsl(6 68% 48%);
    --color-danger-hover: hsl(6 70% 39%);
    --color-on-danger: hsl(0 0% 100%);
    --color-danger-soft: color-mix(in oklab, var(--color-danger) 11%, var(--color-bg));

    --color-focus: #4c5562;
    --color-link: #4c5562;
    --color-link-hover: #6c7580;
    --overlay: hsl(214 28% 12% / 0.68);

    --siteinoneclick-accent: #4c5562;
    --siteinoneclick-accent-soft: color-mix(in oklab, var(--siteinoneclick-accent) 13%, var(--color-bg));
    --siteinoneclick-cool: #4c5562;
    --siteinoneclick-cool-soft: color-mix(in oklab, var(--siteinoneclick-cool) 12%, var(--color-bg));
    --siteinoneclick-glass: hsl(0 0% 100% / 0.66);
    --siteinoneclick-glass-strong: hsl(0 0% 100% / 0.82);
  }
}