/**
 * Design tokens for Imagine Virtual theme mode (light / dark).
 * Applied via html[data-theme] on new pages only.
 */

html[data-theme="light"] {
  color-scheme: light;

  --iv-color-bg: #ffffff;
  --iv-color-bg-subtle: #f7f7f7;
  --iv-color-text: #000000;
  --iv-color-text-muted: rgba(0, 0, 0, 0.72);
  --iv-color-text-subtle: rgba(0, 0, 0, 0.45);
  --iv-color-border: rgba(0, 0, 0, 0.12);
  --iv-color-border-strong: rgba(0, 0, 0, 0.18);
  --iv-color-surface: #ffffff;
  --iv-color-surface-muted: rgba(0, 0, 0, 0.05);
  --iv-color-surface-hover: rgba(0, 0, 0, 0.03);

  --iv-color-btn-primary-bg: #000000;
  --iv-color-btn-primary-text: #ffffff;
  --iv-color-btn-primary-hover-bg: #222222;

  --iv-color-btn-secondary-text: #000000;
  --iv-color-btn-secondary-border: #000000;
  --iv-color-btn-secondary-hover-bg: #000000;
  --iv-color-btn-secondary-hover-text: #ffffff;

  --iv-color-accent-bg: #000000;
  --iv-color-accent-text: #ffffff;
  --iv-color-accent-text-muted: rgba(255, 255, 255, 0.78);
  --iv-color-accent-btn-bg: #ffffff;
  --iv-color-accent-btn-text: #000000;
  --iv-color-accent-btn-hover-bg: #f2f2f2;
  --iv-color-accent-border: rgba(255, 255, 255, 0.55);

  --iv-logo-url: url(../img/logo_site_imagine-01.svg);
  --iv-menu-icon-url: url(../img/menu.svg);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --iv-color-bg: #0f0f0f;
  --iv-color-bg-subtle: #161616;
  --iv-color-text: #f5f5f5;
  --iv-color-text-muted: rgba(255, 255, 255, 0.72);
  --iv-color-text-subtle: rgba(255, 255, 255, 0.45);
  --iv-color-border: rgba(255, 255, 255, 0.14);
  --iv-color-border-strong: rgba(255, 255, 255, 0.22);
  --iv-color-surface: #1a1a1a;
  --iv-color-surface-muted: rgba(255, 255, 255, 0.06);
  --iv-color-surface-hover: rgba(255, 255, 255, 0.04);

  --iv-color-btn-primary-bg: #ffffff;
  --iv-color-btn-primary-text: #000000;
  --iv-color-btn-primary-hover-bg: #e8e8e8;

  --iv-color-btn-secondary-text: #f5f5f5;
  --iv-color-btn-secondary-border: #f5f5f5;
  --iv-color-btn-secondary-hover-bg: #ffffff;
  --iv-color-btn-secondary-hover-text: #000000;

  --iv-color-accent-bg: #f5f5f5;
  --iv-color-accent-text: #000000;
  --iv-color-accent-text-muted: rgba(0, 0, 0, 0.72);
  --iv-color-accent-btn-bg: #000000;
  --iv-color-accent-btn-text: #ffffff;
  --iv-color-accent-btn-hover-bg: #222222;
  --iv-color-accent-border: rgba(0, 0, 0, 0.35);

  --iv-logo-url: url(../img/logo_site_imagine_branco.svg);
  --iv-menu-icon-url: url(../img/menu-white.svg);
}