@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap");

:root {
  color-scheme: light;
  --paper: #f4f8fc;
  --paper-raised: #fbfdff;
  --ink: #172335;
  --muted: #657286;
  --line: #d4e0eb;
  --blue: #178dcc;
  --blue-deep: #075f91;
  --blue-soft: #dceffc;
  --purple: #7256a8;
  --purple-deep: #513b79;
  --purple-soft: #ede9f7;
  --magenta: #b85f91;
  --magenta-soft: #f8eaf2;
  --highlight: #7256a8;
  --hero-highlight: #7f50bf;
  --primary-fill: #633993;
  --green: #17724b;
  --green-soft: #e4f4ec;
  --shadow: 0 18px 55px rgb(31 68 103 / 0.13);
  --font-display: "Newsreader", Georgia, serif;
  --font-text: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Stable aliases for the existing static application styles. */
  --brand-50: var(--blue-soft);
  --brand-100: color-mix(in srgb, var(--blue-soft) 75%, var(--paper-raised));
  --brand-200: color-mix(in srgb, var(--blue) 32%, var(--paper-raised));
  --brand-500: var(--blue);
  --brand-600: var(--purple);
  --brand-700: var(--purple-deep);
  --brand-900: var(--blue-deep);
  --accent-50: var(--magenta-soft);
  --accent-100: color-mix(in srgb, var(--magenta-soft) 76%, var(--paper-raised));
  --accent-500: var(--magenta);
  --accent-700: color-mix(in srgb, var(--magenta) 76%, var(--ink));
  --bg: var(--paper);
  --panel: var(--paper-raised);
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141017;
  --paper-raised: #1d1721;
  --ink: #e7f0f5;
  --muted: #9eb2c3;
  --line: #28465e;
  --blue: #56c7f2;
  --blue-deep: #8bd9f7;
  --blue-soft: #103a54;
  --purple: #b7a5e5;
  --purple-deep: #d0c1f0;
  --purple-soft: #273556;
  --magenta: #d890b8;
  --magenta-soft: #3d2942;
  --highlight: #e0a6c7;
  --hero-highlight: var(--highlight);
  --primary-fill: var(--purple-deep);
  --green: #78c9a7;
  --green-soft: #173a36;
  --shadow: 0 18px 55px rgb(2 9 20 / 0.45);
}

html { background: var(--paper); }
body { color: var(--ink); background-color: var(--paper); font-family: var(--font-text); }
button, input, textarea, select { font-family: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.observaloka-theme-toggle { width: 40px; min-width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--purple); background: var(--paper-raised); box-shadow: none; cursor: pointer; }
.brand-mark { border-radius: 9px 9px 18px 9px; background: linear-gradient(145deg, var(--blue), var(--purple), var(--magenta)); }

/* Shared navigation remains available without JavaScript. */
footer.site-footer { box-sizing: border-box; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 32px; width: 100%; max-width: 1180px; margin: 32px auto 0; padding: 32px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.site-footer-brand { color: var(--ink); font: 500 1.5rem/1.2 var(--font-display); text-decoration: none; }
.site-footer-intro p { margin: 10px 0; }
.site-footer-sitemap { display: block; width: auto; }
.site-footer-sitemap h2 { margin: 0 0 12px; color: var(--ink); font: 600 .875rem/1.5 var(--font-text); }
.site-footer-sitemap ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; list-style: none; padding: 0; margin: 0; }
.site-footer-sitemap a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; font-size: .875rem; line-height: 1.5; }
.site-footer-sitemap a:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 650px) { footer.site-footer { grid-template-columns: 1fr; gap: 20px; padding: 28px 20px; } .site-footer-sitemap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; } }