*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
button { font-family: inherit; }

:root,
:root[data-theme="light"] {
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f6;
  --color-text: #15202b;
  --color-muted: #5b6b7a;
  --color-border: #d7dee5;
  --color-primary: #0f6ba8;
  --color-primary-dark: #0b5586;
  --color-primary-contrast: #ffffff;
  --color-accent: #e3a311;
  --color-success: #1b8a5a;
  --color-success-bg: #e6f6ee;
  --color-danger: #c13a2e;
  --color-danger-bg: #fbeae8;
  --color-gold: #d9a441;
  --color-silver: #adb7bf;
  --color-bronze: #c17a4a;
  --tint-gold: #fbf1de;
  --tint-silver: #eef1f3;
  --tint-bronze: #f6e9df;
  --tint-accent: #fbecc9;
  --focus-ring: #7fb6e0;
  --shadow-sm: 0 1px 3px rgba(15, 32, 45, .08);
  --shadow-md: 0 10px 30px rgba(15, 32, 45, .12);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

:root[data-theme="dark"] {
  --color-bg: #0f1720;
  --color-surface: #182430;
  --color-surface-alt: #1f2e3c;
  --color-text: #eef3f7;
  --color-muted: #9fb0bd;
  --color-border: #2b3c4b;
  --color-primary: #4da3e0;
  --color-primary-dark: #3686bf;
  --color-primary-contrast: #06141f;
  --color-accent: #f0bb3e;
  --color-success: #4fd499;
  --color-success-bg: #123427;
  --color-danger: #ef7a6c;
  --color-danger-bg: #3a1a17;
  --color-gold: #e3bb64;
  --color-silver: #c3cbd1;
  --color-bronze: #d08f5f;
  --tint-gold: #3a2f16;
  --tint-silver: #28313a;
  --tint-bronze: #35251a;
  --tint-accent: #3a2f16;
  --focus-ring: #4da3e0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f1720;
    --color-surface: #182430;
    --color-surface-alt: #1f2e3c;
    --color-text: #eef3f7;
    --color-muted: #9fb0bd;
    --color-border: #2b3c4b;
    --color-primary: #4da3e0;
    --color-primary-dark: #3686bf;
    --color-primary-contrast: #06141f;
    --color-accent: #f0bb3e;
    --color-success: #4fd499;
    --color-success-bg: #123427;
    --color-danger: #ef7a6c;
    --color-danger-bg: #3a1a17;
    --color-gold: #e3bb64;
    --color-silver: #c3cbd1;
    --color-bronze: #d08f5f;
    --tint-gold: #3a2f16;
    --tint-silver: #28313a;
    --tint-bronze: #35251a;
    --tint-accent: #3a2f16;
    --focus-ring: #4da3e0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .5);
  }
}

body { background: var(--color-bg); color: var(--color-text); line-height: 1.55; transition: background-color .2s ease, color .2s ease; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0; text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
 [hidden] { display: none !important; }