:root {
  color-scheme: dark;
  /* Flash message defaults (overridden in media queries) */
  --flash-top: 4.5rem;
  --flash-side: 1rem;
  --flash-radius: 10px;
  --flash-font-size: 1rem;
  --flash-padding-y: 0.75rem;
  --flash-padding-x: 1rem;

  --bg-dark: #0f0f0f;
  --bg-card: #151515;
  --bg-soft: #101010;
  --text-dark: #0f172a;
  --text-light: #e7e7e7;
  --text-muted: #9ca3af;
  --text-on-dark: #f8fafc;
  --text-on-dark-muted: #cbd5e1;
  --accent: #4bc2ff;
  --accent-soft: rgba(75, 194, 255, 0.12);
  --bg-base: #020617;
  --panel-bg: rgba(15, 23, 42, 0.96);
  --panel-border: 1px solid rgba(31, 41, 55, 0.9);
  --page-bg-image: url("../images/tech-bg.webp");
  --page-bg-overlay: linear-gradient(
    180deg,
    rgba(111, 124, 154, 0.55),
    rgba(115, 127, 154, 0.38)
  );
  --page-shell-overlay: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.522),
    rgb(255, 255, 255)
  );
  --page-shell-glass: rgba(10, 15, 27, 0.55);
  --panel-radius: 0.9rem;
  --border-soft: rgba(148, 163, 184, 0.6);
  --border-strong: rgba(148, 163, 184, 0.9);
  --radius: 0.9rem;
  --shadow-soft: 0 1.4rem 3rem rgba(0, 0, 0, 0.6);
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display:
    "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-accent:
    "IBM Plex Sans Condensed", "Avenir Next Condensed", "Arial Narrow",
    sans-serif;
  --panel-cut-size: clamp(2.2rem, 3vw, 3.4rem);
  --space-page: clamp(1rem, 1.8vw + 0.6rem, 1.75rem);
  --space-section: clamp(1.1rem, 1.6vw + 0.7rem, 1.6rem);
  --space-gap: clamp(1.05rem, 1vw + 0.6rem, 1.5rem);
  --topnav-offset: clamp(3.95rem, 4.2vw + 0.2rem, 4.95rem);
  --page-shell-content-top-padding: calc(var(--space-page) + 2.75rem);
  --page-shell-topnav-padding: calc(var(--topnav-offset) + 3rem);
  --page-shell-inline-padding: clamp(1.2rem, 4vw, 3rem);
  --page-shell-bottom-padding: var(--space-page);
  --page-shell-max-width: min(1400px, 100%);
  --page-bg-accent:
    radial-gradient(
      circle at 14% 16%,
      rgba(75, 194, 255, 0.14),
      transparent 32%
    ),
    radial-gradient(circle at 86% 8%, rgba(34, 197, 94, 0.08), transparent 24%),
    radial-gradient(
      circle at 50% 100%,
      rgba(99, 102, 241, 0.08),
      transparent 28%
    );
  --surface-elevated: linear-gradient(
    155deg,
    rgba(15, 23, 42, 0.96),
    rgba(8, 15, 30, 0.9)
  );
  --surface-elevated-strong:
    radial-gradient(
      circle at top left,
      rgba(75, 194, 255, 0.16),
      transparent 40%
    ),
    linear-gradient(150deg, rgba(15, 23, 42, 0.98), rgba(8, 15, 30, 0.9));
  --surface-border-soft: rgba(148, 163, 184, 0.24);
  --surface-shadow-soft: 0 1rem 2.25rem rgba(2, 6, 23, 0.22);

}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-dark: #f3f4f8;
  --bg-card: #ffffff;
  --bg-soft: #ffffff;
  --text-dark: #0f172a;
  --text-light: #0f172a;
  --text-muted: #667085;
  --text-on-dark: #f8fafc;
  --text-on-dark-muted: #dbe7f3;
  --accent: #0070d1;
  --accent-soft: rgba(0, 112, 209, 0.12);
  --bg-base: #edeced;
  --panel-bg: rgba(255, 255, 255, 0.9);
  --panel-border: 1px solid rgba(148, 163, 184, 0.24);
  --page-bg-image: none;
  --page-bg-overlay: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0.99),
    rgba(237, 236, 237, 0.98)
  );
  --page-bg-accent:
    radial-gradient(
      circle at 12% 14%,
      rgba(0, 112, 209, 0.06),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 8%,
      rgba(237, 236, 237, 0.9),
      transparent 26%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(221, 223, 226, 0.58),
      transparent 30%
    );
  --page-shell-overlay: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.68),
    rgba(237, 236, 237, 0.28)
  );
  --page-shell-glass: rgba(255, 255, 255, 0.8);
  --border-soft: rgba(148, 163, 184, 0.34);
  --border-strong: rgba(148, 163, 184, 0.36);
  --radius: 0.9rem;
  --shadow-soft: 0 1.05rem 2.25rem rgba(16, 46, 88, 0.08);
  --surface-elevated: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98),
    rgba(237, 236, 237, 0.97)
  );
  --surface-elevated-strong:
    radial-gradient(
      circle at top left,
      rgba(0, 112, 209, 0.08),
      transparent 42%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(232, 233, 236, 0.52),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.98),
      rgba(237, 236, 237, 0.97)
    );
  --surface-border-soft: rgba(148, 163, 184, 0.18);
  --surface-shadow-soft: 0 1rem 2.1rem rgba(16, 46, 88, 0.08);
}

@media (max-width: 640px) {
  :root {
    --flash-top: 5.5rem;
    --flash-side: 0.75rem;
    --flash-padding-y: 0.85rem;
    --flash-padding-x: 1rem;
    --flash-font-size: 0.98rem;
  }
}

@media (max-width: 320px) {
  :root {
    --flash-top: 5.8rem;
    --flash-side: 0.5rem;
    --flash-padding-y: 0.8rem;
    --flash-padding-x: 0.9rem;
    --flash-font-size: 0.9rem;
  }
}

@media (max-width: 200px) {
  :root {
    --flash-top: 6rem;
    --flash-side: 0.35rem;
    --flash-padding-y: 0.72rem;
    --flash-padding-x: 0.8rem;
    --flash-font-size: 0.82rem;
    --flash-radius: 9px;
  }
}

@media print {
  :root {
    --bg-dark: #fff;
    --bg-card: #fff;
    --bg-soft: #fff;
    --text-light: #111;
    --text-muted: #444;
    --accent: #111;
  }
}