html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family:
    Inter,
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

:root {
  --width-stretch: 100%;

  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;

  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 18px;
  --border-radius-f: 999px;

  --border-width-xs: 1px;
  --border-width-sm: 2px;
  --border-width-md: 4px;
  --border-width-lg: 8px;
  --border-width-xl: 16px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 10%);
  --shadow-lg: 0 18px 48px rgb(15 23 42 / 14%);

  --h1-font-size: 3rem;
  --h1-font-weight: 800;
  --h1-line-height: 1.1;
  --h1-letter-spacing: -0.025em;
  --h2-font-size: 1.875rem;
  --h2-font-weight: 700;
  --h2-line-height: 2.25rem;
  --h2-letter-spacing: -0.025em;
  --h3-font-size: 1.5rem;
  --h3-font-weight: 600;
  --h3-line-height: 2rem;
  --h3-letter-spacing: -0.02em;
  --h4-font-size: 1.25rem;
  --h4-font-weight: 600;
  --h4-line-height: 1.75rem;
  --h4-letter-spacing: -0.01em;
  --lg-font-size: 1.125rem;
  --lg-font-weight: 400;
  --lg-line-height: 1.75rem;
  --lg-letter-spacing: normal;
  --md-font-size: 1rem;
  --md-font-weight: 400;
  --md-line-height: 1.5rem;
  --md-letter-spacing: normal;
  --sm-font-size: 0.875rem;
  --sm-font-weight: 400;
  --sm-line-height: 1.25rem;
  --sm-letter-spacing: normal;
  --xs-font-size: 0.75rem;
  --xs-font-weight: 500;
  --xs-line-height: 1rem;
  --xs-letter-spacing: 0.04em;

  --primary: oklch(0.28 0 0);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.94 0 0);
  --secondary-foreground: oklch(0.27 0 0);
  --destructive: oklch(0.58 0.23 28);
  --destructive-foreground: white;
  --background: oklch(0.975 0 0);
  --surface: oklch(0.995 0 0);
  --foreground: oklch(0.22 0 0);
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.9 0 0);
  --accent-foreground: oklch(0.24 0 0);
  --border: oklch(0.87 0 0);
  --input: oklch(0.92 0 0);
  --ring: oklch(0.45 0 0);
  --scrollbar-size: 6px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: oklch(0.76 0 0);
  --scrollbar-thumb-hover: oklch(0.66 0 0);
}

.dark {
  /* Match RouteVN Creator's default Dark color palette. */
  --background: oklch(0.24 0 0);
  --surface: oklch(0.2775 0 0);
  --foreground: oklch(0.96 0 0);
  --primary: oklch(0.9 0 0);
  --primary-foreground: oklch(0.28 0 0);
  --secondary: oklch(0.34 0 0);
  --secondary-foreground: oklch(0.96 0 0);
  --muted: oklch(0.32 0 0);
  --muted-foreground: oklch(0.77 0 0);
  --accent: oklch(0.41 0 0);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.7 0.19 22.216);
  --destructive-foreground: white;
  --border: oklch(1 0 0 / 14%);
  --input: oklch(1 0 0 / 18%);
  --ring: oklch(0.64 0 0);
  --scrollbar-thumb: oklch(0.45 0 0);
  --scrollbar-thumb-hover: oklch(0.55 0 0);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 45%);
  --shadow-md: 0 5px 14px rgb(0 0 0 / 45%);
  --shadow-lg: 0 10px 28px rgb(0 0 0 / 50%);
}

*:focus-visible {
  outline: 2px solid var(--ring);
}