:root {
  --brand-green: #1a5960;
  --brand-gold: #fe9e01;
  --brand-orange: #d9480f;
  --dp-header-bg: #ffffffd1;
  --dp-footer-bg: #f1f5f9;
  --dp-body-bg: #f2f6fb;
  --dp-card-bg: #fff;
  --dp-text: #101828;
  --dp-text-secondary: #475569;
  --dp-text-muted: #5a6a80;
  --dp-text-link: #1e293b;
  --text-amber: #0f172a;
  --dp-text-light: #fff;
  --dp-text-white: #fff;
  --dp-border: #e2e8f0;
  --dp-input-bg: #fff;
  --dp-scroll: #1a535c;
  --dp-scroll-track: #e2e4ea;
  --dp-reader-bg: #fff;
  --dp-reader-text: #2c3e50;
  --dp-reader-fs: clamp(1.02rem, 0.45vw + 0.92rem, 1.12rem);
  --dp-reader-lh: 1.7;
  --dp-reader-font: Inter, sans-serif;
  --dp-fs-xs: clamp(0.72rem, 0.18vw + 0.7rem, 0.82rem);
  --dp-fs-sm: clamp(0.8rem, 0.2vw + 0.76rem, 0.9rem);
  --dp-fs-base: clamp(0.92rem, 0.24vw + 0.88rem, 1rem);
  --dp-fs-md: clamp(1rem, 0.34vw + 0.94rem, 1.1rem);
  --dp-fs-lg: clamp(1.12rem, 0.55vw + 1rem, 1.28rem);
  --dp-fs-xl: clamp(1.32rem, 0.9vw + 1rem, 1.58rem);
  --dp-fs-2xl: clamp(1.6rem, 1.45vw + 1.08rem, 2.08rem);
  --dp-btn-fs: clamp(0.84rem, 0.16vw + 0.8rem, 0.94rem);
  --dp-btn-px: clamp(0.7rem, 0.4vw + 0.55rem, 0.95rem);
  --dp-btn-py: clamp(0.42rem, 0.25vw + 0.34rem, 0.62rem);
  --dp-btn-min-height: clamp(2.25rem, 2vw + 1.8rem, 2.6rem);
  --dp-control-icon-size: clamp(2.25rem, 2vw + 1.35rem, 2.5rem);
  --f-inter: Inter, system-ui, -apple-system, sans-serif;
  --f-merriweather: Merriweather, serif;
  --f-bevtn: "Be Vietnam Pro", sans-serif;
  --f-roboto: Roboto, sans-serif;
  --bs-text-opacity: 1;
  --bs-body-bg: var(--dp-body-bg);
  --bs-body-color: var(--dp-text);
  --bs-primary: var(--brand-green);
  --bs-primary-rgb: 26, 89, 96;
  --bs-link-color: var(--dp-text-link);
  --bs-border-color: var(--dp-border);
  --bs-tertiary-bg: var(--dp-input-bg);
  --bs-secondary-bg: var(--dp-card-bg);
  --bs-secondary-color: var(--dp-text);
  --dp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --dp-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --dp-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --dp-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] {
  --dp-header-bg: #18181a;
  --dp-footer-bg: #020617;
  --dp-body-bg: #121212;
  --dp-card-bg: #1e1e1e;
  --dp-text: #e0e0e0;
  --dp-text-secondary: #94a3b8;
  --dp-text-muted: #94a3b8;
  --dp-text-link: #f1f5f9;
  --text-amber: var(--brand-gold);
  --dp-text-link-hover: var(--brand-gold);
  --dp-text-light: #fff;
  --dp-border: #1e293b;
  --dp-input-bg: #1e293b;
  --dp-scroll: var(--brand-gold);
  --dp-scroll-track: #020617;
  --bs-body-bg: var(--dp-body-bg);
  --bs-body-color: var(--dp-text);
  --bs-card-bg: var(--dp-card-bg);
  --bs-primary: var(--brand-gold);
  --bs-link-color: var(--dp-text-link);
  --bs-border-color: var(--dp-border);
  --bs-tertiary-bg: var(--dp-input-bg);
  --bs-secondary-bg: var(--dp-card-bg);
  --bs-secondary-color: var(--dp-text);
  --bs-primary-rgb: 254, 158, 1;
  --dp-author-card-border: #334155;
  --dp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --dp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --dp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}