/* tokens.css: GENERADO por build-tokens.py desde tokens.json. No editar a mano. */

:root {
  color-scheme: light;
  --brand-logo-blue: #007cc1;
  --brand-blue: #2a9ed6;
  --brand-blue-dark: #0071a7;
  --brand-light-blue: #bbe9ff;
  --brand-grey: #474747;
  --brand-pink: #e94057;
  --brand-orange: #f27121;
  --brand-peach: #ffaf50;
  --brand-plain: #edeae6;
  --brand-black: #000000;
  --color-bg: #f2fafe;
  --color-surface: #ffffff;
  --color-surface-muted: #edeae6;
  --color-surface-accent: #e3f4fd;
  --color-surface-highlight: #bbe9ff;
  --color-header-bg: #474747;
  --color-on-header: #ffffff;
  --color-on-header-muted: #d9dde0;
  --color-header-rule: #2a9ed6;
  --color-footer-bg: #0071a7;
  --color-on-footer: #ffffff;
  --color-border: #d6e2ea;
  --color-border-strong: #a9bccb;
  --color-border-input: #6c7d8a;
  --color-text: #23272b;
  --color-text-muted: #55616b;
  --color-text-accent: #00507a;
  --color-accent: #0071a7;
  --color-accent-hover: #005e8c;
  --color-accent-active: #004c72;
  --color-on-accent: #ffffff;
  --color-focus: #0071a7;
  --color-cta: #f27121;
  --color-cta-hover: #f58a47;
  --color-on-cta: #1a1a1a;
  --color-danger: #b42323;
  --color-danger-bg: #fdecec;
  --color-on-danger-bg: #8f1b1b;
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-on-success-bg: #1b5e20;
  --color-warning: #8a5300;
  --color-warning-bg: #fff4e0;
  --color-on-warning-bg: #6d4100;
  --color-info-bg: #e3f4fd;
  --color-on-info-bg: #00507a;
  --color-disabled-bg: #e4e9ed;
  --color-on-disabled: #56616a;
  --color-chart-production: #007cc1;
  --color-chart-self-consumption: #2e7d32;
  --color-chart-surplus: #c25a10;
  --color-chart-grid-import: #474747;
  --color-chart-battery: #c8283f;
  --color-chart-band: #bbe9ff;
  --gradient-loading: linear-gradient(35deg, #e94057, #ffaf50);
  --gradient-brand-blue: linear-gradient(35deg, #0071a7, #2a9ed6);
  --font-display: 'Orbitron', 'Red Hat Text', system-ui, sans-serif;
  --font-sans: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --text-xs-weight: 500;
  --text-xs-family: var(--font-sans);
  --text-sm-size: 14px;
  --text-sm-line: 20px;
  --text-sm-weight: 400;
  --text-sm-family: var(--font-sans);
  --text-base-size: 16px;
  --text-base-line: 24px;
  --text-base-weight: 400;
  --text-base-family: var(--font-sans);
  --text-lg-size: 18px;
  --text-lg-line: 26px;
  --text-lg-weight: 600;
  --text-lg-family: var(--font-sans);
  --text-h3-size: 20px;
  --text-h3-line: 28px;
  --text-h3-weight: 700;
  --text-h3-family: var(--font-sans);
  --text-h2-size: 22px;
  --text-h2-line: 30px;
  --text-h2-weight: 600;
  --text-h2-family: var(--font-display);
  --text-h1-size: 28px;
  --text-h1-line: 36px;
  --text-h1-weight: 700;
  --text-h1-family: var(--font-display);
  --text-kpi-size: 32px;
  --text-kpi-line: 38px;
  --text-kpi-weight: 700;
  --text-kpi-family: var(--font-sans);
  --text-display-size: 36px;
  --text-display-line: 44px;
  --text-display-weight: 700;
  --text-display-family: var(--font-display);
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 40, 70, .06), 0 4px 12px rgba(0, 40, 70, .08);
  --shadow-pop: 0 12px 32px rgba(0, 40, 70, .18);
  --shadow-sticky: 0 -4px 16px rgba(0, 40, 70, .12);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-loading: 1400ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 56px;
  --content-max: 1200px;
  --wizard-max: 640px;
  --sticky-cta-h: 72px;
  --control: 48px;
  --control-sm: 40px;
  --touch-min: 44px;
  --z-sticky: 90;
  --z-header: 100;
  --z-drawer: 900;
  --z-dialog: 1000;
  --z-toast: 1100;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* Breakpoints (usar en @media, no son variables): sm 480px · md 768px · lg 1024px */

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-loading: 0ms; }
}