/* Ruba Charina light-mode design foundation. Theme and Elementor can consume these variables. */
:root {
  color-scheme: light;
  --rc-background: #f7f5f0;
  --rc-surface: #ffffff;
  --rc-surface-soft: #eeeae2;
  --rc-text: #171715;
  --rc-muted: #66635d;
  --rc-border: #d8d3c9;
  --rc-accent: #b84932;
  --rc-link: #171715;
  --rc-focus: #b84932;
  --e-global-color-primary: var(--rc-text);
  --e-global-color-secondary: var(--rc-muted);
  --e-global-color-text: var(--rc-text);
  --e-global-color-accent: var(--rc-accent);
}

html, body {
  background-color: var(--rc-background);
  color: var(--rc-text);
}

body,
.site,
.site-content,
.elementor-location-header,
.elementor-location-footer,
.elementor-location-single,
.elementor-location-archive {
  background-color: var(--rc-background);
  color: var(--rc-text);
}

/* Neutralize template-level dark panels while preserving image backgrounds. */
body :where(.e-con, .elementor-section, .elementor-column-wrap) {
  color: var(--rc-text);
}

body :where(.e-con, .elementor-section, .elementor-column-wrap)[style*="background-color"] {
  background-color: transparent !important;
}

body a { color: var(--rc-link); }
body :where(h1, h2, h3, h4, h5, h6, p, li, label) { color: inherit; }

body :where(input, textarea, select) {
  background: var(--rc-surface);
  border-color: var(--rc-border);
  color: var(--rc-text);
}

body :where(input, textarea, select, button, a):focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 3px;
}

::selection { background: var(--rc-text); color: var(--rc-surface); }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}