html {
  height: 100%;
  margin: 0;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overscroll-behavior: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Rettangoli's base.css loads first and sets the reset, --width-stretch, the
   focus ring and selection colours. This file keeps the app's fixed shell and
   sets the theme tokens. It follows the RouteVN Reader's theme, with SN Pro,
   the RouteVN logo's typeface, for text. */

/* Hide scrollbar for Chrome, Safari */
html::-webkit-scrollbar {
  display: none;
}

body::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  width: 100%;
  margin: 0;
  /* base.css sets the body text to the md token; the app's own text sizes
     were built on the browser default, so keep it. */
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  overscroll-behavior: none;
  overflow: auto;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

:root {
  --font-family-sans:
    "SN Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Hiragino Sans", "Noto Sans JP", sans-serif;

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

  --border-radius-xs: 1px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --tag-border-radius: 999px;
  /* br=f draws pills on wide boxes and circles on square ones. */
  --border-radius-f: 9999px;
  --border-radius-full: 9999px;

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

  --shadow-sm:
    0px 1px 2px rgba(15, 23, 42, 0.06), 0px 0px 0px 1px rgba(15, 23, 42, 0.05);
  --shadow-md:
    0px 10px 28px rgba(15, 23, 42, 0.1), 0px 2px 6px rgba(15, 23, 42, 0.06),
    0px 0px 0px 1px rgba(15, 23, 42, 0.05);
  --shadow-lg:
    0px 24px 56px rgba(15, 23, 42, 0.16), 0px 6px 16px rgba(15, 23, 42, 0.08),
    0px 0px 0px 1px rgba(15, 23, 42, 0.06);

  --h1-font-size: 3rem;
  --h1-font-weight: 800;
  --h1-line-height: 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.025em;

  --h4-font-size: 1.125rem;
  --h4-font-weight: 600;
  --h4-line-height: 1.625rem;
  --h4-letter-spacing: -0.015em;

  --lg-font-size: 1.125rem;
  --lg-font-weight: 400;
  --lg-line-height: 1.75rem;
  --lg-letter-spacing: normal;

  --md-font-size: 0.9375rem;
  --md-font-weight: normal;
  --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: normal;

  /* Monochrome, as on main: dark slate for the main action, greys elsewhere. */
  --primary: oklch(0.32 0.018 250);
  --primary-foreground: oklch(0.985 0.003 250);
  --secondary: oklch(0.945 0.006 250);
  --secondary-foreground: oklch(0.25 0.012 250);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0.003 250);

  /* surface color */
  --background: oklch(0.975 0.004 250);
  --surface: oklch(0.992 0.002 250);
  --foreground: oklch(0.21 0.012 250);

  /* item hovered color */
  --muted: oklch(0.94 0.006 250);
  --muted-foreground: oklch(0.47 0.014 250);

  /* item selected color */
  --accent: oklch(0.9 0.015 250);
  --accent-foreground: oklch(0.23 0.015 250);

  /* border/outline */
  --border: oklch(0.88 0.01 250);

  /* border of text inputs */
  --input: var(--border);

  /* ring of text inputs, and the keyboard focus outline */
  --ring: oklch(0.6 0.035 250);
  --focus-ring-outline: 2px solid var(--ring);

  /* Links in running text look like the text around them until hovered. */
  --anchor-color: inherit;
  --anchor-color-hover: var(--foreground);
  --anchor-text-decoration: none;
  --anchor-text-decoration-hover: underline;

  --selection: var(--accent);
  --selection-foreground: var(--accent-foreground);

  --scrollbar-size: 6px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(
    in oklch,
    var(--background) 82%,
    var(--foreground) 18%
  );
  --scrollbar-thumb-hover: color-mix(
    in oklch,
    var(--background) 76%,
    var(--foreground) 24%
  );
}

.dark {
  --background: oklch(0.145 0 0);
  --surface: oklch(0.18 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --ring: oklch(0.556 0 0);
  /* Tokens built from other tokens are resolved where they are declared, so
     the dark theme declares them again. */
  --input: var(--border);
  --focus-ring-outline: 2px solid var(--ring);
  --anchor-color-hover: var(--foreground);
  --selection: var(--accent);
  --selection-foreground: var(--accent-foreground);
  --shadow-sm:
    0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.06);
  --shadow-md:
    0px 10px 28px rgba(0, 0, 0, 0.45), 0px 0px 0px 1px rgba(255, 255, 255, 0.07);
  --shadow-lg:
    0px 24px 56px rgba(0, 0, 0, 0.55), 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
}

/* d11 layout tokens. Custom properties inherit into the app's shadow DOM, so
   inline styles in the view can respond to the viewport through them. */
:root {
  --page-width: min(1200px, calc(100% - 48px));
  --page-pad-top: 24px;
}

@media only screen and (max-width: 640px) {
  :root {
    --page-width: calc(100% - 32px);
    --page-pad-top: 16px;
  }
}