@layer theme {
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --palette-hue: 210;
      --palette-hue-rotate-by: 30;
      --palette-chroma: 0.08;

      --primary: oklch(0.65 0.20 var(--palette-hue));
      --primary-light: oklch(0.75 0.18 var(--palette-hue));
      --primary-dark: oklch(0.55 0.22 var(--palette-hue));
      --primary-contrast: oklch(0.98 0.02 var(--palette-hue));

      --text-color-1: oklch(0.95 0.02 var(--palette-hue));
      --text-color-1-contrast: oklch(0.15 0.02 var(--palette-hue));
      --text-color-2: oklch(0.72 0.04 var(--palette-hue));
      --text-color-2-contrast: oklch(0.25 0.02 var(--palette-hue));

      --surface-default: oklch(0.18 0.02 var(--palette-hue));
      --surface-filled: oklch(0.22 0.03 var(--palette-hue));
      --surface-tonal: oklch(0.25 0.04 var(--palette-hue));
      --surface-elevated: oklch(0.28 0.04 var(--palette-hue));

      --shadow-color: oklch(0.10 0.02 var(--palette-hue));
      --shadow-strength: 0.6;
      --inner-shadow-highlight: oklch(0.95 0.02 var(--palette-hue) / 0.1);

      --shadow-s: inset 0 1px 2px var(--inner-shadow-highlight), 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 4px oklch(0 0 0 / 0.15);
      --shadow-m: inset 0 1px 2px oklch(1 0 0 / 0.5), 0 2px 4px oklch(0 0 0 / 0.3), 0 4px 8px oklch(0 0 0 / 0.15);
      --shadow-l: inset 0 1px 2px oklch(1 0 0 / 0.7), 0 4px 6px oklch(0 0 0 / 0.3), 0 6px 10px oklch(0 0 0 / 0.15);

      --border-color: oklch(0.35 0.03 var(--palette-hue));
      --border-radius: 8px;
      --border-width: 1px;

      --field-border-color: oklch(0.40 0.04 var(--palette-hue));
      --field-border-width: 1px;
      --field-size: 2.5rem;
      --field-size-small: 2rem;

      --font-size-h1: 2.5rem;
      --font-size-h2: 2rem;
      --font-size-h3: 1.75rem;
      --font-size-h4: 1.5rem;
      --font-size-h5: 1.25rem;
      --font-size-h6: 1.125rem;

      --font-size-lg: 1.125rem;
      --font-size-md: 1rem;
      --font-size-sm: 0.875rem;
      --font-size-xs: 0.75rem;
    }
  }

  :root {
    --palette-hue: 210;
    --palette-hue-rotate-by: 30;
    --palette-chroma: 0.08;

    --primary: oklch(0.55 0.18 var(--palette-hue));
    --primary-light: oklch(0.65 0.16 var(--palette-hue));
    --primary-dark: oklch(0.45 0.20 var(--palette-hue));
    --primary-contrast: oklch(0.98 0.01 var(--palette-hue));

    --text-color-1: oklch(0.20 0.02 var(--palette-hue));
    --text-color-1-contrast: oklch(0.95 0.01 var(--palette-hue));
    --text-color-2: oklch(0.45 0.03 var(--palette-hue));
    --text-color-2-contrast: oklch(0.85 0.02 var(--palette-hue));

    --surface-default: oklch(0.96 0.01 var(--palette-hue));
    --surface-filled: oklch(0.99 0.005 var(--palette-hue));
    --surface-tonal: oklch(0.93 0.02 var(--palette-hue));
    --surface-elevated: oklch(1.00 0 var(--palette-hue));

    --shadow-color: oklch(0.30 0.02 var(--palette-hue));
    --shadow-strength: 0.3;
    --inner-shadow-highlight: oklch(1 0 0 / 0.3);

    --shadow-s: inset 0 1px 2px var(--inner-shadow-highlight), 0 1px 2px oklch(0 0 0 / 0.15), 0 2px 4px oklch(0 0 0 / 0.08);
    --shadow-m: inset 0 1px 2px oklch(1 0 0 / 0.4), 0 2px 4px oklch(0 0 0 / 0.15), 0 4px 8px oklch(0 0 0 / 0.08);
    --shadow-l: inset 0 1px 2px oklch(1 0 0 / 0.5), 0 4px 6px oklch(0 0 0 / 0.15), 0 6px 10px oklch(0 0 0 / 0.08);

    --border-color: oklch(0.85 0.02 var(--palette-hue));
    --border-radius: 8px;
    --border-width: 1px;

    --field-border-color: oklch(0.75 0.03 var(--palette-hue));
    --field-border-width: 1px;
    --field-size: 2.5rem;
    --field-size-small: 2rem;

    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;

    --font-size-lg: 1.125rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
  }

  :root[data-theme="dark"] {
    --palette-hue: 210;
    --palette-hue-rotate-by: 30;
    --palette-chroma: 0.08;

    --primary: oklch(0.65 0.20 var(--palette-hue));
    --primary-light: oklch(0.75 0.18 var(--palette-hue));
    --primary-dark: oklch(0.55 0.22 var(--palette-hue));
    --primary-contrast: oklch(0.98 0.02 var(--palette-hue));

    --text-color-1: oklch(0.95 0.02 var(--palette-hue));
    --text-color-1-contrast: oklch(0.15 0.02 var(--palette-hue));
    --text-color-2: oklch(0.72 0.04 var(--palette-hue));
    --text-color-2-contrast: oklch(0.25 0.02 var(--palette-hue));

    --surface-default: oklch(0.18 0.02 var(--palette-hue));
    --surface-filled: oklch(0.22 0.03 var(--palette-hue));
    --surface-tonal: oklch(0.25 0.04 var(--palette-hue));
    --surface-elevated: oklch(0.28 0.04 var(--palette-hue));

    --shadow-color: oklch(0.10 0.02 var(--palette-hue));
    --shadow-strength: 0.6;
    --inner-shadow-highlight: oklch(0.95 0.02 var(--palette-hue) / 0.1);

    --shadow-s: inset 0 1px 2px var(--inner-shadow-highlight), 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 4px oklch(0 0 0 / 0.15);
    --shadow-m: inset 0 1px 2px oklch(1 0 0 / 0.5), 0 2px 4px oklch(0 0 0 / 0.3), 0 4px 8px oklch(0 0 0 / 0.15);
    --shadow-l: inset 0 1px 2px oklch(1 0 0 / 0.7), 0 4px 6px oklch(0 0 0 / 0.3), 0 6px 10px oklch(0 0 0 / 0.15);

    --border-color: oklch(0.35 0.03 var(--palette-hue));
    --border-radius: 8px;
    --border-width: 1px;

    --field-border-color: oklch(0.40 0.04 var(--palette-hue));
    --field-border-width: 1px;
    --field-size: 2.5rem;
    --field-size-small: 2rem;

    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;

    --font-size-lg: 1.125rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
  }
}