@font-face { font-family: "TWK Everett"; src: url("/vendor/everett/TWKEverett-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Everett"; src: url("/vendor/everett/TWKEverett-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Everett"; src: url("/vendor/everett/TWKEverett-BookItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "TWK Everett"; src: url("/vendor/everett/TWKEverett-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TWK Everett"; src: url("/vendor/everett/TWKEverett-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-sans: "TWK Everett", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --font-read: "TWK Everett", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", Georgia, serif;

  --background-100: #ffffff;
  --background-200: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #efefef;
  --gray-300: #e8e8e8;
  --gray-400: #e3e3e3;
  --gray-500: #d0d0d0;
  --gray-600: #b5b5b5;
  --gray-700: #8f8f8f;
  --gray-800: #7a7a7a;
  --gray-900: #666666;
  --gray-1000: #171717;
  --gray-alpha-100: rgba(0, 0, 0, 0.039);
  --gray-alpha-400: rgba(0, 0, 0, 0.11);

  --blue-100: #f2f7fe;  --blue-400: #c9e0fe;  --blue-700: #0172dc;  --blue-900: #266ec3;  --blue-1000: #183d6b;
  --red-100: #fff4f3;   --red-700: #d73337;   --red-800: #c22a2e;   --red-900: #b94642;
  --amber-100: #fef5ea; --amber-700: #d8a02a; --amber-900: #956300;
  --green-100: #effaf0; --green-700: #2f9e52; --green-900: #00823a;
  --teal-900: #087c77;
  --purple-900: #8656b7;

  --surface: var(--background-100);
  --surface-subtle: var(--background-200);
  --surface-hover: var(--gray-100);
  --surface-active: var(--gray-200);
  --surface-floating: #ffffff;
  --border: var(--gray-400);
  --border-strong: var(--gray-500);
  --border-control: var(--gray-700);
  --ink: var(--gray-1000);
  --ink-muted: var(--gray-900);
  --ink-disabled: var(--gray-600);
  --primary: var(--gray-1000);
  --primary-hover: #383838;
  --on-primary: var(--background-100);
  --on-color: #ffffff;
  --on-color-dark: #0a0a0a;
  --link: var(--blue-900);
  --focus-ring: var(--blue-700);
  --overlay: rgba(0, 0, 0, 0.32);

  --hl-sentence: rgba(216, 160, 42, 0.30);
  --hl-word: rgba(1, 114, 220, 0.18);
  --hl-active: rgba(216, 160, 42, 0.55);
  --hl-outline: var(--blue-700);
  --selection: rgba(1, 114, 220, 0.20);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --material-base: 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-small: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-medium: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-large: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-tooltip: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
  --material-menu: 0 4px 8px -4px rgba(0, 0, 0, 0.08), 0 16px 24px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-modal: 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 24px 32px -8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --material-fullscreen: 0 12px 24px -6px rgba(0, 0, 0, 0.10), 0 40px 64px -12px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.08);

  --z-sticky: 100; --z-menu: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;

  --toolbar-h: 52px;
  --sidebar-w: clamp(380px, 32vw, 620px);
  --sidebar-min: 320px;
  --sidebar-max: 820px;
  --reader-gutter: clamp(16px, 3vw, 48px);
  --paper-w: min(72ch, 100%);
  --paper-pad: clamp(24px, 4.5vw, 64px);
  --page-gap: clamp(12px, 2vh, 24px);
}

@media (max-aspect-ratio: 1/1) {
  :root { --sidebar-w: clamp(340px, 38vw, 520px); }
}
@media (max-height: 760px) {
  :root { --toolbar-h: 46px; --page-gap: 12px; }
}

@media (min-aspect-ratio: 2/1) {
  :root { --sidebar-w: clamp(420px, 24vw, 620px); --reader-gutter: clamp(32px, 6vw, 120px); }
}

:root[data-theme="dark"] {
  --background-100: #0a0a0a;
  --background-200: #000000;
  --gray-100: #1a1a1a;
  --gray-200: #1f1f1f;
  --gray-300: #262626;
  --gray-400: #2b2b2b;
  --gray-500: #3d3d3d;
  --gray-600: #6e6e6e;
  --gray-700: #8f8f8f;
  --gray-800: #7d7d7d;
  --gray-900: #a8a8a8;
  --gray-1000: #ededed;
  --gray-alpha-100: rgba(255, 255, 255, 0.102);
  --gray-alpha-400: rgba(255, 255, 255, 0.169);
  --blue-100: #0c1723; --blue-400: #182e4b; --blue-900: #64a1ee; --blue-1000: #c2daf9;
  --red-100: #22100f; --red-900: #e47c75;
  --amber-100: #1e1406; --amber-900: #cd9130;
  --green-100: #0c1a0f; --green-900: #5cb572;
  --teal-900: #08b6af; --purple-900: #b188df;
  --surface-floating: #171717;
  --border-control: var(--gray-600);
  --ink-disabled: var(--gray-500);
  --primary-hover: #cccccc;
  --overlay: rgba(0, 0, 0, 0.72);
  --hl-sentence: rgba(216, 160, 42, 0.26);
  --hl-word: rgba(100, 161, 238, 0.22);
  --hl-active: rgba(216, 160, 42, 0.48);
  --material-base: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --material-small: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5);
  --material-medium: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.5);
  --material-large: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 16px -4px rgba(0, 0, 0, 0.6);
  --material-tooltip: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  --material-menu: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 24px -8px rgba(0, 0, 0, 0.6);
  --material-modal: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 32px -8px rgba(0, 0, 0, 0.7);
  --material-fullscreen: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 40px 64px -12px rgba(0, 0, 0, 0.8);
}