:root {
  color-scheme: light;
  --volt-accent: #00a878;
  --volt-accent-strong: #007f60;
  --volt-accent-soft: #d9f8ed;
  --volt-energy: #f5b942;
  --volt-energy-strong: #b87300;
  --volt-water: #29a7dc;
  --volt-water-strong: #0876a5;
  --volt-danger: #c33b32;
  --volt-warning: #c07a00;
  --volt-success: #087f5b;

  --page-bg: #eaf4f0;
  --page-bg-deep: #dcece7;
  --text-primary: #10251f;
  --text-secondary: #506761;
  --text-tertiary: #70837e;
  --text-on-accent: #f7fffc;

  --glass-1: rgba(255, 255, 255, .48);
  --glass-2: rgba(255, 255, 255, .64);
  --glass-3: rgba(255, 255, 255, .78);
  --glass-elevated: rgba(255, 255, 255, .88);
  --glass-control: rgba(255, 255, 255, .72);
  --glass-navigation: rgba(247, 255, 252, .76);
  --glass-modal: rgba(250, 255, 253, .92);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-border-strong: rgba(117, 153, 142, .34);
  --glass-highlight: rgba(255, 255, 255, .92);
  --glass-shadow: 0 22px 60px rgba(35, 78, 66, .13), 0 3px 12px rgba(35, 78, 66, .07);
  --glass-shadow-soft: 0 12px 32px rgba(35, 78, 66, .09);
  --glass-shadow-control: 0 6px 18px rgba(35, 78, 66, .08);
  --glass-blur-sm: 12px;
  --glass-blur: 22px;
  --glass-blur-lg: 32px;
  --glass-saturation: 145%;

  --radius-xs: .65rem;
  --radius-sm: .9rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.65rem;
  --radius-xl: 2.1rem;
  --radius-pill: 999px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.35rem, 2vw, 1.7rem);
  --font-size-display: clamp(2rem, 4.5vw, 4.8rem);
  --font-size-metric: clamp(2rem, 4vw, 3.5rem);
  --line-tight: 1.08;
  --line-normal: 1.5;

  --layout-sidebar: 17rem;
  --layout-content: 88rem;
  --layout-gutter: clamp(1rem, 2.5vw, 2.25rem);
  --touch-target: 2.75rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --z-base: 1;
  --z-sticky: 20;
  --z-navigation: 40;
  --z-dialog: 80;
  --z-skip: 100;
  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --volt-accent: #39dfa9;
  --volt-accent-strong: #64edbd;
  --volt-accent-soft: rgba(48, 207, 157, .15);
  --volt-energy: #ffc95d;
  --volt-energy-strong: #ffd77e;
  --volt-water: #64c9f4;
  --volt-water-strong: #8bd8f7;
  --volt-danger: #ff8f87;
  --volt-warning: #ffd071;
  --volt-success: #72e6be;

  --page-bg: #06130f;
  --page-bg-deep: #020b08;
  --text-primary: #f0fbf7;
  --text-secondary: #adc3bb;
  --text-tertiary: #7f9a91;
  --text-on-accent: #04140e;

  --glass-1: rgba(15, 35, 29, .45);
  --glass-2: rgba(14, 37, 30, .61);
  --glass-3: rgba(16, 42, 34, .76);
  --glass-elevated: rgba(17, 43, 35, .88);
  --glass-control: rgba(21, 48, 40, .72);
  --glass-navigation: rgba(7, 26, 20, .78);
  --glass-modal: rgba(11, 31, 25, .94);
  --glass-border: rgba(151, 224, 198, .18);
  --glass-border-strong: rgba(130, 230, 193, .28);
  --glass-highlight: rgba(220, 255, 243, .18);
  --glass-shadow: 0 26px 70px rgba(0, 0, 0, .40), 0 3px 14px rgba(0, 0, 0, .22);
  --glass-shadow-soft: 0 14px 38px rgba(0, 0, 0, .28);
  --glass-shadow-control: 0 7px 20px rgba(0, 0, 0, .24);
}

:root[data-accent="emerald"] { --volt-accent: #00a878; --volt-accent-strong: #007f60; --volt-accent-soft: #d9f8ed; }
:root[data-accent="azure"] { --volt-accent: #2f8df4; --volt-accent-strong: #176bc2; --volt-accent-soft: #dcecff; }
:root[data-accent="violet"] { --volt-accent: #8057df; --volt-accent-strong: #633bc2; --volt-accent-soft: #ebe3ff; }
:root[data-accent="amber"] { --volt-accent: #dc9212; --volt-accent-strong: #a76800; --volt-accent-soft: #fff0cf; }
:root[data-accent="coral"] { --volt-accent: #e66558; --volt-accent-strong: #b94238; --volt-accent-soft: #ffe3df; }
:root[data-accent="teal"] { --volt-accent: #009e9a; --volt-accent-strong: #007875; --volt-accent-soft: #d6f5f3; }
:root[data-theme="dark"][data-accent="emerald"] { --volt-accent: #39dfa9; --volt-accent-strong: #64edbd; --volt-accent-soft: rgba(48, 207, 157, .15); }
:root[data-theme="dark"][data-accent="azure"] { --volt-accent: #5aa8ff; --volt-accent-strong: #84c0ff; --volt-accent-soft: rgba(47, 141, 244, .17); }
:root[data-theme="dark"][data-accent="violet"] { --volt-accent: #aa87ff; --volt-accent-strong: #c4adff; --volt-accent-soft: rgba(128, 87, 223, .18); }
:root[data-theme="dark"][data-accent="amber"] { --volt-accent: #ffc45d; --volt-accent-strong: #ffd584; --volt-accent-soft: rgba(220, 146, 18, .18); }
:root[data-theme="dark"][data-accent="coral"] { --volt-accent: #ff9187; --volt-accent-strong: #ffb0a9; --volt-accent-soft: rgba(230, 101, 88, .18); }
:root[data-theme="dark"][data-accent="teal"] { --volt-accent: #3bd7d1; --volt-accent-strong: #69e7e2; --volt-accent-soft: rgba(0, 158, 154, .18); }

*, *::before, *::after { box-sizing: border-box; }

/* Contrato de segurança visual: independe do JavaScript. */
[hidden] { display: none !important; }

html {
  min-height: 100%;
  background: var(--page-bg-deep);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--volt-accent) 15%, transparent) 0, transparent 32rem),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--volt-water) 12%, transparent) 0, transparent 30rem),
    linear-gradient(145deg, var(--page-bg), var(--page-bg-deep));
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: var(--line-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
a { color: inherit; }
img, svg { display: block; }

::selection {
  color: var(--text-on-accent);
  background: var(--volt-accent);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--volt-accent) 58%, transparent);
  outline-offset: 3px;
}

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