/* ============================================================
   Midwest Energias — Design Tokens
   Colors, type, and semantic variables
   ============================================================ */

/* Fonts are loaded from Google Fonts.
   If you want to self-host, copy /fonts/*.ttf and use @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand palette (from official brand guide) ---------- */
  --mw-red:        #E53615;   /* Primary accent — alerts, hot highlights */
  --mw-orange:     #F18A26;   /* Primary accent — CTAs, energy, sun */
  --mw-dark:       #282828;   /* Text, surfaces, dark mode base */
  --mw-white:      #FFFFFF;
  --mw-peach:      #FDF1EF;   /* Subtle warm tint, light surfaces */

  /* ---------- Extended neutrals (derived, warm-tinted) ---------- */
  --mw-ink-900:    #282828;
  --mw-ink-800:    #3A3A3A;
  --mw-ink-700:    #4E4E4E;
  --mw-ink-600:    #6B6B6B;
  --mw-ink-500:    #8A8A8A;
  --mw-ink-400:    #B3B3B3;
  --mw-ink-300:    #D6D4D2;
  --mw-ink-200:    #E8E4E1;
  --mw-ink-100:    #F4F0ED;
  --mw-ink-50:     #FAF6F3;

  /* ---------- Orange scale ---------- */
  --mw-orange-900: #7A3E0D;
  --mw-orange-700: #C66B17;
  --mw-orange-500: #F18A26;  /* base */
  --mw-orange-300: #F6B36E;
  --mw-orange-100: #FCE3C9;
  --mw-orange-50:  #FEF3E6;

  /* ---------- Red scale ---------- */
  --mw-red-900:    #7A1106;
  --mw-red-700:    #B52610;
  --mw-red-500:    #E53615;  /* base */
  --mw-red-300:    #EE7560;
  --mw-red-100:    #F9CBC1;
  --mw-red-50:     #FDEAE4;

  /* ---------- Signature gradient (key brand element) ---------- */
  --mw-gradient:        linear-gradient(135deg, #F18A26 0%, #E53615 100%);
  --mw-gradient-reverse:linear-gradient(135deg, #E53615 0%, #F18A26 100%);
  --mw-gradient-soft:   linear-gradient(135deg, #FEF3E6 0%, #FDEAE4 100%);
  --mw-gradient-dark:   linear-gradient(135deg, #282828 0%, #3A3A3A 100%);

  /* ---------- Semantic colors ---------- */
  --mw-success:    #1F9D55;   /* Energy generated, credits ok */
  --mw-warning:    #F18A26;   /* Uses orange from brand */
  --mw-danger:     #E53615;   /* Uses red from brand */
  --mw-info:       #2E66C9;

  --mw-success-bg: #E4F3EA;
  --mw-warning-bg: #FEF3E6;
  --mw-danger-bg:  #FDEAE4;
  --mw-info-bg:    #E4EBF7;

  /* ---------- Semantic surface tokens (light mode default) ---------- */
  --bg:            var(--mw-white);
  --bg-subtle:     var(--mw-peach);
  --bg-muted:      var(--mw-ink-50);
  --bg-raised:     var(--mw-white);
  --bg-inverse:    var(--mw-dark);

  --fg:            var(--mw-ink-900);       /* primary body text */
  --fg-muted:      var(--mw-ink-600);       /* secondary text */
  --fg-subtle:     var(--mw-ink-500);       /* hints, timestamps */
  --fg-inverse:    var(--mw-white);
  --fg-brand:      var(--mw-orange-500);
  --fg-accent:     var(--mw-red-500);

  --border:        var(--mw-ink-200);
  --border-strong: var(--mw-ink-300);
  --border-brand:  var(--mw-orange-500);

  /* ---------- Typography ---------- */
  --font-display:  'Sora', system-ui, sans-serif;
  --font-body:     'Raleway', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Type scale — slight major-third with a tight heading stack */
  --text-xs:       12px;
  --text-sm:       14px;
  --text-base:     16px;
  --text-md:       18px;
  --text-lg:       20px;
  --text-xl:       24px;
  --text-2xl:      30px;
  --text-3xl:      38px;
  --text-4xl:      48px;
  --text-5xl:      60px;
  --text-6xl:      76px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;

  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.04em;
  --ls-wider:      0.08em;

  /* ---------- Spacing (4px grid) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii — 8px is default, logo is angular so avoid over-rounding ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* default */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-xs:  0 1px 2px rgba(40, 40, 40, 0.04);
  --shadow-sm:  0 1px 3px rgba(40, 40, 40, 0.06), 0 1px 2px rgba(40, 40, 40, 0.04);
  --shadow-md:  0 4px 12px rgba(40, 40, 40, 0.08), 0 2px 4px rgba(40, 40, 40, 0.04);
  --shadow-lg:  0 12px 28px rgba(40, 40, 40, 0.10), 0 4px 10px rgba(40, 40, 40, 0.05);
  --shadow-xl:  0 24px 56px rgba(40, 40, 40, 0.14), 0 8px 20px rgba(40, 40, 40, 0.06);
  --shadow-glow-orange: 0 8px 24px rgba(241, 138, 38, 0.28);
  --shadow-glow-red:    0 8px 24px rgba(229, 54, 21, 0.22);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}

/* ============================================================
   Dark mode — brand-dark (#282828) as base surface
   ============================================================ */
[data-theme="dark"],
.dark {
  --bg:            #1C1C1C;
  --bg-subtle:     #232323;
  --bg-muted:      #2E2E2E;
  --bg-raised:     var(--mw-dark);
  --bg-inverse:    var(--mw-white);

  --fg:            #F4F0ED;
  --fg-muted:      #B3B3B3;
  --fg-subtle:     #8A8A8A;
  --fg-inverse:    var(--mw-dark);
  --fg-brand:      var(--mw-orange-300);
  --fg-accent:     var(--mw-red-300);

  --border:        #3A3A3A;
  --border-strong: #4E4E4E;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Base element styles — opt in via class="mw-typography"
   on your root so it doesn't leak into host projects
   ============================================================ */
.mw-typography,
.mw-typography * {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mw-typography {
  color: var(--fg);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

.mw-h1, h1.mw {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}

.mw-h2, h2.mw {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}

.mw-h3, h3.mw {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.mw-h4, h4.mw {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.mw-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.mw-body, p.mw {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
}

.mw-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.mw-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.mw-data {
  /* For stat numbers, kWh totals, currency */
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

.mw-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Gradient text utility — for big display moments */
.mw-gradient-text {
  background: var(--mw-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Focus ring — accessible, branded */
.mw-typography :focus-visible {
  outline: 2px solid var(--mw-orange-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}