@layer tokens {
  :root {
    color-scheme: light dark;

    --radius: 0.625rem;
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.4);
    --radius-2xl: calc(var(--radius) * 1.8);

    --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
    --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
    --card: light-dark(oklch(1 0 0), oklch(0.205 0 0));
    --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
    --popover: light-dark(oklch(1 0 0), oklch(0.205 0 0));
    --popover-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
    --primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
    --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
    --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
    --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
    --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
    --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.704 0.191 22.216));
    --border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
    --input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 15%));
    --ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
    --chart-1: light-dark(oklch(0.646 0.222 41.116), oklch(0.488 0.243 264.376));
    --chart-2: light-dark(oklch(0.6 0.118 184.704), oklch(0.696 0.17 162.48));
    --chart-3: light-dark(oklch(0.398 0.07 227.392), oklch(0.769 0.188 70.08));
    --chart-4: light-dark(oklch(0.828 0.189 84.429), oklch(0.627 0.265 303.9));
    --chart-5: light-dark(oklch(0.769 0.188 70.08), oklch(0.645 0.246 16.439));
    --sidebar: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
    --sidebar-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
    --sidebar-primary: light-dark(oklch(0.205 0 0), oklch(0.488 0.243 264.376));
    --sidebar-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0));
    --sidebar-accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    --sidebar-accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
    --sidebar-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
    --sidebar-ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));

    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-heading: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --text-xs: 0.75rem;
    --text-xs--line-height: 1rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25rem;
    --text-base: 1rem;
    --text-base--line-height: 1.5rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.75rem;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.75rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 2rem;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 2.25rem;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 2.5rem;
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-display: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
    --text-display--line-height: 1.15;

    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
  }

  /* The signed-in person's appearance setting overrides the device's. It sits
     on body because Turbo visits replace body but keep the html element. */
  :root:has(> body[data-appearance="light"]) { color-scheme: light; }
  :root:has(> body[data-appearance="dark"]) { color-scheme: dark; }
}