/* Shared visual tokens. Feature styles should consume these instead of literals. */
:root {
  --font-ui: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-data: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --font-size-caption: 0.6875rem;
  --font-size-tiny: 0.5rem;
  --font-size-micro: 0.5625rem;
  --font-size-overline: 0.625rem;
  --font-size-small: 0.75rem;
  --font-size-small-plus: 0.8125rem;
  --font-size-body: 0.875rem;
  --font-size-subtitle: 1rem;
  --font-size-title: 1.25rem;
  --font-size-heading-small: 0.9375rem;
  --font-size-lead: 1.1875rem;
  --font-size-display: clamp(1.8125rem, 5vw, 3.125rem);
  --font-weight-normal: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 650;
  --font-weight-bold: 720;
  --line-height-copy: 1.65;
  --letter-spacing-label: 0.11em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-control: 0.5rem;
  --radius-card: 0.75rem;
  --radius-panel: 0.875rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-focus-width: 2px;
  --border-separator: var(--border-width) solid var(--line-soft);
  --shadow-panel: 0 12px 34px #00000020, inset 0 1px #ffffff07;
  --shadow-overlay: 0 24px 80px #0002;
  --focus-ring: color-mix(in srgb, var(--green) 65%, transparent);
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);

  --text-strong: var(--text);
  --text-secondary: var(--muted);
  --text-subtle: var(--dim);
  --border-control: var(--line);
  --surface-control: var(--surface);
  --surface-hover: var(--surface-raised);
  --button-bg: var(--surface);
  --button-hover: var(--surface-raised);
  --button-text: var(--text);
  --button-accent: var(--green);
  --positive: var(--green);
  --negative: var(--red);
  --category-ai-border: color-mix(in srgb, var(--green) 38%, var(--line));
  --category-ai-text: var(--green);
  --news-cover-text: #eef8e9;
  --news-cover-soft: color-mix(in srgb, var(--green) 24%, var(--surface));
  --news-cover-deep: color-mix(in srgb, var(--bg) 82%, var(--green-deep));
  --news-cover-grid: color-mix(in srgb, var(--text) 7%, transparent);
}

html[data-theme="light"] {
  --text-strong: #20283b;
  --text-secondary: #58647a;
  --text-subtle: #66728a;
  --border-control: #dce2ed;
  --surface-control: #fff;
  --surface-hover: #f7faf5;
  --button-bg: #fff;
  --button-hover: #f7faf5;
  --button-text: #253047;
  --button-accent: #397b37;
  --positive: #16754f;
  --negative: #bc394e;
  --category-ai-border: #b8ddd5;
  --category-ai-text: #187767;
  --shadow-panel: 0 10px 30px #2933540a;
  --shadow-overlay: 0 24px 80px #18211612;
  --news-cover-text: #f0f7ed;
}

html[data-theme="ocean"] {
  --news-cover-text: #e4f7ff;
}

html[data-theme="amber"] {
  --news-cover-text: #fff2dc;
}

html[data-theme="light"] #refreshNews,
html[data-theme="light"] .secondary-action {
  border-color: var(--border-control);
  background: var(--button-bg);
  color: var(--button-text);
}

html[data-theme="light"] #refreshNews span,
html[data-theme="light"] .secondary-action span {
  color: var(--button-accent);
}

html[data-theme="light"] .news-category.ai {
  border-color: var(--category-ai-border);
  color: var(--category-ai-text);
}

html[data-theme="light"] #refreshNews:hover,
html[data-theme="light"] .secondary-action:hover {
  background: var(--button-hover);
}