/* ── BASE RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS VARIABLES: LIGHT MODE (default) ── */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f6f7;
  --bg-tertiary: #e3e5e8;
  --text-primary: #16181c;
  --text-secondary: #5b5f66;
  --border-light: rgba(22, 24, 28, 0.09);
  --border-medium: rgba(22, 24, 28, 0.18);

  /* Brand accent — Kelly Green — overridden by applyBrand() */
  --accent: #2e9e4f;
  --accent-bg: #e4f5e9;
  --accent-dark: #216b37;
  --accent-text: #216b37;

  /* Status colours — fixed, not branded */
  --amber-bg: #fbf0dd;
  --amber-text: #7a4c0f;
  --amber-border: #d98a1e;
  --red-bg: #fbeaea;
  --red-text: #a83535;
  --red-border: #d14343;
  --processing-bg: #e8f0fd;
  --processing-text: #1f4fa8;
  --toggle-off-bg: #9a9da3;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --font-heading: "Quicksand", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Accessibility: base font scale multiplier — overridden by applyFontSize() */
  --fs: 1;
  --fs-xs: calc(10px * var(--fs));
  --fs-sm: calc(12px * var(--fs));
  --fs-base: calc(13px * var(--fs));
  --fs-md: calc(14px * var(--fs));
  --fs-lg: calc(15px * var(--fs));
  --fs-xl: calc(17px * var(--fs));
  --fs-icon: calc(14px * var(--fs));
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg-primary: #1b2430;
  --bg-secondary: #212b39;
  --bg-tertiary: #16181c;
  --text-primary: #f5f6f7;
  --text-secondary: #9a9da3;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.18);
  --accent-bg: #163826;
  --accent-dark: #4bbf72;
  --accent-text: #7fd89b;
  --amber-bg: #3a2a10;
  --amber-text: #f0b458;
  --amber-border: #d98a1e;
  --red-bg: #3d1c1c;
  --red-text: #ec8f8f;
  --red-border: #d14343;
  --processing-bg: #142c4d;
  --processing-text: #8ab2f0;
  --toggle-off-bg: #5b5f66;
}
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f6f7;
  --bg-tertiary: #e3e5e8;
  --text-primary: #16181c;
  --text-secondary: #5b5f66;
  --border-light: rgba(22, 24, 28, 0.09);
  --border-medium: rgba(22, 24, 28, 0.18);
  --accent-bg: #e4f5e9;
  --accent-dark: #216b37;
  --accent-text: #216b37;
  --amber-bg: #fbf0dd;
  --amber-text: #7a4c0f;
  --amber-border: #d98a1e;
  --red-bg: #fbeaea;
  --red-text: #a83535;
  --red-border: #d14343;
  --processing-bg: #e8f0fd;
  --processing-text: #1f4fa8;
  --toggle-off-bg: #9a9da3;
}

/* ── AUTO DARK MODE (system preference, when no data-theme set) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #1b2430;
    --bg-secondary: #212b39;
    --bg-tertiary: #16181c;
    --text-primary: #f5f6f7;
    --text-secondary: #9a9da3;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.18);
    --accent-bg: #163826;
    --accent-dark: #4bbf72;
    --accent-text: #7fd89b;
    --amber-bg: #3a2a10;
    --amber-text: #f0b458;
    --amber-border: #d98a1e;
    --red-bg: #3d1c1c;
    --red-text: #ec8f8f;
    --red-border: #d14343;
    --processing-bg: #142c4d;
    --processing-text: #8ab2f0;
    --toggle-off-bg: #5b5f66;
  }
}

html,
body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  font-size: calc(16px * var(--fs));
  overflow-x: hidden;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── SKIP-TO-CONTENT (accessibility) ── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* Visually hidden utility class (for screen readers) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}