:root {
  color-scheme: light;

  --mcsog-brand-lime: #C8EB21;
  --mcsog-brand-yellow: #FDFD1F;
  --mcsog-brand-ink: #121212;
  --mcsog-brand-link: #90C208;

  --mcsog-state-ok: #2F9E5E;
  --mcsog-state-warn: #E8A100;
  --mcsog-state-danger: #E5484D;
  --mcsog-state-info: #3B82F6;

  --mcsog-bar-cyan: #23E3D6;
  --mcsog-bar-yellow: #FDFD1F;
  --mcsog-bar-magenta: #FF3D9A;

  --mcsog-logo-fill: #000000;
  --mcsog-bg-page: #FFFFFF;
  --mcsog-bg-card: #FFFFFF;
  --mcsog-bg-sunk: #F2F2F2;
  --mcsog-bg-sidebar: var(--mcsog-glass-nav);
  --mcsog-bg-inverse: #111827;
  --mcsog-bg-code: var(--mcsog-code-chrome);
  --mcsog-bg-overlay: rgba(255, 255, 255, .98);
  --mcsog-bg-hero: #111827;

  --mcsog-table-bg: #FDFDFC;
  --mcsog-glass-nav: rgba(255, 255, 255, .65);
  --mcsog-glass-main: rgba(255, 255, 255, .55);
  --mcsog-glass-code: rgba(255, 255, 255, .78);
  --mcsog-glass-footer: rgba(255, 255, 255, .68);
  --mcsog-code-chrome: #F2F2F2;
  --mcsog-code-body: rgba(255, 255, 255, .78);
  --mcsog-blur-lg: 20px;
  --mcsog-blur-md: 14px;
  --mcsog-blur-sm: 10px;
  --mcsog-tint-accent: rgba(200, 235, 33, .18);
  --mcsog-shadow-code: 0 4px 20px rgba(15, 23, 42, .08);

  --mcsog-text-1: #1E293B;
  --mcsog-text-2: #475569;
  --mcsog-text-3: #64748B;
  --mcsog-text-4: #94A3B8;
  --mcsog-text-invert: #FFFFFF;
  --mcsog-text-code: #1E293B;
  --mcsog-text-link: var(--mcsog-brand-link);

  --mcsog-text-onink-1: rgba(255, 255, 255, .94);
  --mcsog-text-onink-2: rgba(255, 255, 255, .70);
  --mcsog-text-onink-3: rgba(255, 255, 255, .46);
  --mcsog-text-onink-4: rgba(255, 255, 255, .26);

  --mcsog-line-1: #E2E8F0;
  --mcsog-line-2: #CBD5E1;
  --mcsog-line-dark: rgba(255, 255, 255, .12);
  --mcsog-line-3: #BCC8D8;

  --mcsog-fill-hover: rgba(18, 18, 18, .05);
  --mcsog-fill-active: rgba(18, 18, 18, .09);
  --mcsog-fill-dark: rgba(255, 255, 255, .07);
  --mcsog-fill-dark-active: rgba(255, 255, 255, .14);
  --mcsog-scrim: rgba(18, 18, 18, .55);

  --mcsog-tint-lime: rgba(200, 235, 33, .18);
  --mcsog-tint-yellow: rgba(253, 253, 31, .22);
  --mcsog-tint-ok: rgba(47, 158, 94, .12);
  --mcsog-tint-warn: rgba(232, 161, 0, .14);
  --mcsog-tint-danger: rgba(229, 72, 77, .12);
  --mcsog-tint-info: rgba(59, 130, 246, .12);

  --mcsog-skeleton-base: #E9E9E9;
  --mcsog-skeleton-shine: #F6F6F6;

  --mcsog-code-kw: #C8EB21;
  --mcsog-code-str: #F2C14E;
  --mcsog-code-num: #7BD3F0;
  --mcsog-code-fn: #9ED0FF;
  --mcsog-code-op: #FF7AB2;
  --mcsog-code-com: rgba(255, 255, 255, .42);

  --mcsog-shadow-1: 0 1px 2px rgba(17, 24, 39, .04);
  --mcsog-shadow-2: 0 2px 8px rgba(17, 24, 39, .06);
  --mcsog-shadow-3: 0 12px 32px rgba(17, 24, 39, .12);
  --mcsog-shadow-pop: 0 12px 32px rgba(17, 24, 39, .16);

  --mcsog-font-sans: "HarmonyOS Sans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mcsog-font-mono: "HarmonyOS Sans Mono", ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  --mcsog-fs-10: 10px;
  --mcsog-fs-11: 11px;
  --mcsog-fs-12: 12px;
  --mcsog-fs-13: 13px;
  --mcsog-fs-14: 14px;
  --mcsog-fs-16: 16px;
  --mcsog-fs-18: 18px;
  --mcsog-fs-20: 20px;
  --mcsog-fs-22: 22px;
  --mcsog-fs-24: 24px;
  --mcsog-fs-26: 26px;
  --mcsog-fs-28: 28px;
  --mcsog-fs-32: 32px;
  --mcsog-fs-display: clamp(36px, 4.6vw, 58px);

  --mcsog-fw-300: 300;
  --mcsog-fw-400: 400;
  --mcsog-fw-500: 500;
  --mcsog-fw-600: 600;
  --mcsog-fw-700: 700;

  --mcsog-lh-title: 1.25;
  --mcsog-lh-body: 1.5;
  --mcsog-lh-long: 1.65;

  --mcsog-ls-tight: -.01em;
  --mcsog-ls-wide: .14em;

  --mcsog-sp-2: 2px;
  --mcsog-sp-4: 4px;
  --mcsog-sp-6: 6px;
  --mcsog-sp-8: 8px;
  --mcsog-sp-10: 10px;
  --mcsog-sp-12: 12px;
  --mcsog-sp-14: 14px;
  --mcsog-sp-16: 16px;
  --mcsog-sp-18: 18px;
  --mcsog-sp-20: 20px;
  --mcsog-sp-24: 24px;
  --mcsog-sp-28: 28px;
  --mcsog-sp-32: 32px;
  --mcsog-sp-40: 40px;
  --mcsog-sp-48: 48px;
  --mcsog-sp-64: 64px;
  --mcsog-sp-80: 80px;

  --mcsog-r-2: 2px;
  --mcsog-r-4: 4px;
  --mcsog-r-6: 6px;
  --mcsog-r-8: 8px;
  --mcsog-r-10: 10px;
  --mcsog-r-12: 12px;
  --mcsog-r-14: 12px;
  --mcsog-r-16: 14px;
  --mcsog-r-20: 16px;
  --mcsog-r-24: 18px;
  --mcsog-r-32: 24px;
  --mcsog-r-full: 999px;

  --mcsog-icon-12: 12px;
  --mcsog-icon-6: 6px;
  --mcsog-icon-16: 16px;
  --mcsog-icon-20: 20px;
  --mcsog-icon-24: 24px;
  --mcsog-icon-28: 28px;
  --mcsog-icon-32: 32px;
  --mcsog-icon-36: 36px;
  --mcsog-icon-40: 40px;
  --mcsog-icon-44: 44px;

  --mcsog-stroke-1: 1px;
  --mcsog-stroke-2: 2px;

  --mcsog-dur-fast: 140ms;
  --mcsog-dur-base: 260ms;
  --mcsog-dur-slow: 420ms;

  --mcsog-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mcsog-ease-inout: cubic-bezier(.65, 0, .35, 1);

  --mcsog-sidebar-w: 248px;
  --mcsog-rail-w: 64px;
  --mcsog-topbar-h: 64px;
  --mcsog-bottomnav-h: 56px;
  --mcsog-content-max: 1360px;
  --mcsog-prose-max: 780px;
  --mcsog-scrollbar-w: 10px;
  --mcsog-search-pad-r: 56px;
  --mcsog-quicknav-h: 96px;

  --mcsog-focus-ring: 0 0 0 2px var(--mcsog-brand-lime);
  --mcsog-focus-ring-dark: 0 0 0 2px var(--mcsog-brand-yellow);
}

[data-theme="dark"] {
  color-scheme: dark;

  --mcsog-state-ok: #4FC286;
  --mcsog-state-warn: #F5B83D;
  --mcsog-state-danger: #FF6B70;
  --mcsog-state-info: #6BA6FF;

  --mcsog-logo-fill: #FFFFFF;
  --mcsog-bg-page: #000000;
  --mcsog-bg-card: #1A1A1A;
  --mcsog-bg-sunk: #141414;
  --mcsog-bg-sidebar: var(--mcsog-glass-nav);
  --mcsog-bg-inverse: #F1F5F9;
  --mcsog-bg-code: var(--mcsog-code-chrome);
  --mcsog-bg-overlay: #0A0A0A;
  --mcsog-bg-hero: #0A0A0A;

  --mcsog-table-bg: #262626;
  --mcsog-glass-nav: rgba(0, 0, 0, .65);
  --mcsog-glass-main: rgba(0, 0, 0, .45);
  --mcsog-glass-code: rgba(30, 30, 30, .78);
  --mcsog-glass-footer: rgba(0, 0, 0, .58);
  --mcsog-code-chrome: #0A0A0A;
  --mcsog-code-body: rgba(30, 30, 30, .78);
  --mcsog-tint-accent: rgba(200, 235, 33, .14);
  --mcsog-shadow-code: 0 4px 20px rgba(0, 0, 0, .3);

  --mcsog-text-1: #F1F5F9;
  --mcsog-text-2: #CBD5E1;
  --mcsog-text-3: #94A3B8;
  --mcsog-text-4: #64748B;
  --mcsog-text-invert: #0A0A0A;
  --mcsog-text-code: #F1F5F9;

  --mcsog-line-1: rgba(255, 255, 255, .08);
  --mcsog-line-2: rgba(255, 255, 255, .15);
  --mcsog-line-dark: rgba(255, 255, 255, .10);
  --mcsog-line-3: rgba(255, 255, 255, .30);

  --mcsog-fill-hover: rgba(255, 255, 255, .06);
  --mcsog-fill-active: rgba(255, 255, 255, .11);
  --mcsog-fill-dark: rgba(255, 255, 255, .07);
  --mcsog-fill-dark-active: rgba(255, 255, 255, .14);
  --mcsog-scrim: rgba(0, 0, 0, .62);

  --mcsog-tint-lime: rgba(200, 235, 33, .16);
  --mcsog-tint-yellow: rgba(253, 253, 31, .14);
  --mcsog-tint-ok: rgba(79, 194, 134, .16);
  --mcsog-tint-warn: rgba(245, 184, 61, .16);
  --mcsog-tint-danger: rgba(255, 107, 112, .16);
  --mcsog-tint-info: rgba(107, 166, 255, .16);

  --mcsog-skeleton-base: #3A3A3A;
  --mcsog-skeleton-shine: #4A4A4A;

  --mcsog-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --mcsog-shadow-2: 0 6px 24px rgba(0, 0, 0, .44);
  --mcsog-shadow-3: 0 18px 48px rgba(0, 0, 0, .52);
  --mcsog-shadow-pop: 0 12px 40px rgba(0, 0, 0, .56);
}

:root {
  --mcsog-toast-accent: var(--mcsog-brand-lime);
  --mcsog-toast-tint: rgba(200, 235, 33, .16);
  --mcsog-loader-accent: var(--mcsog-brand-lime);
  --mcsog-loader-bg: #0d1117;
  --mcsog-loader-gold: #f4ea1f;
  --mcsog-loader-muted: rgba(255, 255, 255, .55);
  --mcsog-stagger: 40ms;
}