/* Colour tokens for the 4Stash website: the landing page (landing.html) and
   the guide pages (seo-pages.css). Values match the app's themes in
   src/styles/globals.css.

   Dark is the default. Light applies when the visitor picks it with the
   toggle or the device prefers it; /site-theme.js sets data-site-theme on
   <html> before first paint. The media-query copy covers a page where that
   script did not run. */
:root {
  color-scheme: dark;
  --accent: #4cc7b5;
  --accent-strong: #2f9e8f;
  --accent-soft: rgba(76, 199, 181, 0.12);
  --accent-border: rgba(76, 199, 181, 0.3);
  --amber: #f2b241;
  /* The lime spark of the website's navigation band: main actions. */
  --spark: #d4f25a;
  --spark-hover: #e3f98a;
  --spark-ink: #0f2e2b;
  /* The highlighted word in a headline: lime on dark, teal on light. */
  --highlight: var(--spark);
  --bg: #0d1c1a;
  --bg-card: #132826;
  --bg-elevated: #183230;
  --bg-hover: #1c3835;
  --nav-bg: rgba(13, 28, 26, 0.85);
  --border: rgba(233, 239, 237, 0.08);
  --border-strong: rgba(233, 239, 237, 0.16);
  --text: #e9efed;
  --text-muted: #b2bdb9;
  --text-dim: #8e9b97;
  --green: #34d399;
  --error: #f87171;
  --shade: rgba(0, 0, 0, 0.4);
  --shade-deep: rgba(0, 0, 0, 0.55);
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-site-theme="light"] {
  color-scheme: light;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: rgba(15, 118, 110, 0.1);
  --accent-border: rgba(15, 118, 110, 0.3);
  --amber: #92400e;
  --highlight: var(--accent);
  --bg: #f6f8f7;
  --bg-card: #ffffff;
  --bg-elevated: #eef3f1;
  --bg-hover: #e3ebe8;
  --nav-bg: rgba(246, 248, 247, 0.85);
  --border: rgba(22, 33, 31, 0.1);
  --border-strong: rgba(22, 33, 31, 0.18);
  --text: #16211f;
  --text-muted: #3d4a47;
  --text-dim: #566461;
  --green: #047857;
  --error: #b91c1c;
  --shade: rgba(22, 33, 31, 0.12);
  --shade-deep: rgba(22, 33, 31, 0.16);
}

@media (prefers-color-scheme: light) {
  :root:not([data-site-theme]) {
    color-scheme: light;
    --accent: #0f766e;
    --accent-strong: #115e59;
    --accent-soft: rgba(15, 118, 110, 0.1);
    --accent-border: rgba(15, 118, 110, 0.3);
    --amber: #92400e;
    --highlight: var(--accent);
    --bg: #f6f8f7;
    --bg-card: #ffffff;
    --bg-elevated: #eef3f1;
    --bg-hover: #e3ebe8;
    --nav-bg: rgba(246, 248, 247, 0.85);
    --border: rgba(22, 33, 31, 0.1);
    --border-strong: rgba(22, 33, 31, 0.18);
    --text: #16211f;
    --text-muted: #3d4a47;
    --text-dim: #566461;
    --green: #047857;
    --error: #b91c1c;
    --shade: rgba(22, 33, 31, 0.12);
    --shade-deep: rgba(22, 33, 31, 0.16);
  }
}

/* The theme toggle in the navigation of every website page. It shows the
   theme you would switch to: a sun on dark, a moon on light. */
.nav-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav-theme:hover { color: var(--text); background: var(--accent-soft); }
.nav-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-theme svg { display: block; }
.nav-theme .nav-theme-moon { display: none; }
:root[data-site-theme="light"] .nav-theme .nav-theme-sun { display: none; }
:root[data-site-theme="light"] .nav-theme .nav-theme-moon { display: block; }