/* ---------------------- */
/*  Font Definitions      */
/* ---------------------- */
@font-face {
  font-family: 'LXGW WenKai';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/styles/fonts/LXGWWenKaiLite-Light-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'LXGW WenKai';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/styles/fonts/LXGWWenKaiLite-Regular-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'LXGW WenKai';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/styles/fonts/LXGWWenKaiLite-Medium-subset.woff2') format('woff2');
}

html { font-family: 'LXGW WenKai', system-ui, sans-serif; }

/* ---------------------- */
/*  Root Variables        */
/* ---------------------- */
:root {
  --color-accent: #4C5F52;
  --color-gold: #BDAA7A;
  --color-gray-light: #d9f3f0;

  --text-color: #1A1A1A;
  --text-color-accent: #024407;
  --text-color-muted: #5d6772;
  --text-color-hero: #2a2a2a;

  --font-heading: 'LXGW WenKai', serif;
  --font-body: 'LXGW WenKai', serif;

  --bg-page: #e7e7e7;
  --bg-page-2: #f0f0f0;

  --footer-border-color: rgba(0, 0, 0, 0.05);
}

/* ---------------------- */
/*  Base Styles           */
/* ---------------------- */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
  color: var(--text-color);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100%;
}

/* ---------------------- */
/*  Typography            */
/* ---------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  line-height: 1.3;
}

h1 {
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--text-color-accent);
}
h2 {
  font-size: 1.75rem;
  color: var(--text-color-accent);
  font-weight: 500;
}
h3 {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-accent);
}
h4 {
  font-size: 1.1rem;
  font-weight: 300;
}
h5, h6 {
  font-size: 1rem;
  font-weight: 300;
}

p {
  margin: 0 0 1em;
  font-size: 1rem;
}

strong {
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-color-accent);
}

em {
  font-style: italic;
}

/* ---------------------- */
/*  Utility Classes       */
/* ---------------------- */
.no-wrap {
  white-space: nowrap;
}

.drop-caps {
  font-size: 3rem;
  font-weight: 500;
  /* line-height: 1; */
  display: inline-block;
  vertical-align: baseline;
  color: var(--text-color-accent);
}

.link {
  display: inline-block;
  font-size: 1rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}
.link:hover {
  opacity: 0.7;
}
.link::after {
  font-weight: normal;
  transition: transform 0.2s ease;
}

.theme-zero .link {
  color: var(--text-color-sub-accent);
}

/* ---------------------- */
/*  Liquid Glass Style    */
/* ---------------------- */
.liquid-glass {
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.1) contrast(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.1) contrast(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------------------- */
/*  Theme: Dark / Zero    */
/* ---------------------- */
.theme-zero {
  --bg-page: #0d1117;
  --text-color: #e6edf3;
  --text-color-muted: #8b949e;
  --text-color-accent: #0d8fdf;
  --text-color-sub-accent: #0377be;
  --color-accent: var(--text-color-sub-accent);

  --card-bg: #161b22;
  --card-border: #30363d;

  --shadow-low: rgba(0, 0, 0, 0.2);
  --shadow-high: rgba(0, 0, 0, 0.4);

  --footer-border-color: rgba(255, 255, 255, 0.1);
}