/* =============================================================
   WebTec Design Tokens
   Warm, human, approachable energy tech.
   Fonts self-hosted under /static/fonts (no Google Fonts).
   ============================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-800.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-600.woff2") format("woff2");
}

:root,
[data-theme="light"] {
  /* Brand */
  --wt-brand:            oklch(0.56 0.09 155);   /* sage */
  --wt-brand-strong:     oklch(0.42 0.10 155);
  --wt-brand-soft:       oklch(0.93 0.035 155);
  --wt-brand-contrast:   oklch(0.98 0.005 80);

  --wt-accent:           oklch(0.74 0.13 70);    /* honey */
  --wt-accent-strong:    oklch(0.62 0.14 60);
  --wt-accent-soft:      oklch(0.95 0.045 75);

  /* Surfaces */
  --wt-page:             oklch(0.985 0.006 85);  /* cream */
  --wt-surface:          oklch(1 0 0);
  --wt-surface-2:        oklch(0.975 0.008 80);
  --wt-surface-sunken:   oklch(0.955 0.01 80);
  --wt-overlay:          oklch(0.2 0.01 60 / 0.45);

  /* Lines */
  --wt-border:           oklch(0.91 0.008 80);
  /* Halfway between the hairline and the strong line, for borders 2px and up:
     --wt-border is too faint to read as a deliberate edge once it is thicker
     than 1px, --wt-border-strong too heavy for a large surface like a card. */
  --wt-border-medium:    oklch(0.865 0.009 80);
  --wt-border-strong:    oklch(0.82 0.01 80);
  --wt-focus:            oklch(0.62 0.14 60 / 0.4);

  /* Text */
  --wt-ink:              oklch(0.22 0.012 60);
  --wt-ink-soft:         oklch(0.42 0.012 60);
  --wt-ink-muted:        oklch(0.58 0.01 60);
  --wt-ink-on-brand:     oklch(0.985 0.005 80);

  /* Semantic */
  --wt-success:          oklch(0.60 0.13 155);
  --wt-success-soft:     oklch(0.94 0.05 155);
  --wt-warning:          oklch(0.74 0.14 70);
  --wt-warning-soft:     oklch(0.95 0.05 75);
  --wt-danger:           oklch(0.58 0.18 28);
  --wt-danger-soft:      oklch(0.95 0.04 28);
  --wt-info:             oklch(0.60 0.10 230);
  --wt-info-soft:        oklch(0.94 0.04 230);

  /* Data viz – energy sources */
  --wt-solar:            oklch(0.74 0.13 70);
  --wt-wind:             oklch(0.70 0.09 230);
  --wt-hydro:            oklch(0.56 0.09 215);
  --wt-biomass:          oklch(0.62 0.11 145);
  --wt-battery:          oklch(0.60 0.11 295);
  --wt-grid:             oklch(0.55 0.012 60);

  /* Data viz - EEG balance.
     Softened descendants of the original chart colours (magenta rgb(247,102,255),
     blue rgb(13,85,252), green rgb(115,255,102), red rgb(237,36,21)): same hue,
     roughly half the chroma, and lightness pulled into one band so the three
     wedges read as one family instead of three unrelated highlighters.
     Single source of truth - the doughnut and the "Leistung jetzt" tile both
     resolve these, so never hard-code the rgb() values again. */
  --wt-eeg-gen:          oklch(0.72 0.14 142);
  --wt-eeg-con:          oklch(0.70 0.13 326);
  --wt-eeg-saldo:        oklch(0.62 0.13 263);
  --wt-eeg-saldo-neg:    oklch(0.60 0.15 30);

  /* Shadows */
  --wt-shadow-xs:        0 1px 1px oklch(0.2 0.01 60 / 0.05);
  --wt-shadow-sm:        0 1px 2px oklch(0.2 0.01 60 / 0.06), 0 1px 3px oklch(0.2 0.01 60 / 0.04);
  --wt-shadow-md:        0 4px 12px oklch(0.2 0.01 60 / 0.08), 0 1px 2px oklch(0.2 0.01 60 / 0.04);
  --wt-shadow-lg:        0 12px 28px oklch(0.2 0.01 60 / 0.10), 0 2px 6px oklch(0.2 0.01 60 / 0.04);
  --wt-shadow-inset:     inset 0 1px 0 oklch(1 0 0 / 0.6);
}

[data-theme="dark"] {
  --wt-brand:            oklch(0.74 0.10 155);
  --wt-brand-strong:     oklch(0.84 0.10 155);
  --wt-brand-soft:       oklch(0.32 0.05 155);
  --wt-brand-contrast:   oklch(0.18 0.012 60);

  --wt-accent:           oklch(0.82 0.13 70);
  --wt-accent-strong:    oklch(0.88 0.13 70);
  --wt-accent-soft:      oklch(0.35 0.07 70);

  --wt-page:             oklch(0.18 0.012 60);
  --wt-surface:          oklch(0.22 0.012 60);
  --wt-surface-2:        oklch(0.26 0.012 60);
  --wt-surface-sunken:   oklch(0.16 0.012 60);
  --wt-overlay:          oklch(0.1 0.01 60 / 0.6);

  --wt-border:           oklch(0.32 0.012 60);
  --wt-border-medium:    oklch(0.37 0.012 60);
  --wt-border-strong:    oklch(0.42 0.012 60);
  --wt-focus:            oklch(0.82 0.13 70 / 0.45);

  --wt-ink:              oklch(0.96 0.008 80);
  --wt-ink-soft:         oklch(0.78 0.01 80);
  --wt-ink-muted:        oklch(0.60 0.012 80);
  --wt-ink-on-brand:     oklch(0.18 0.012 60);

  --wt-success:          oklch(0.74 0.11 155);
  --wt-success-soft:     oklch(0.30 0.06 155);
  --wt-warning:          oklch(0.82 0.13 70);
  --wt-warning-soft:     oklch(0.32 0.07 70);
  --wt-danger:           oklch(0.70 0.16 28);
  --wt-danger-soft:      oklch(0.32 0.08 28);
  --wt-info:             oklch(0.72 0.10 230);
  --wt-info-soft:        oklch(0.30 0.06 230);

  --wt-solar:            oklch(0.82 0.13 70);
  --wt-wind:             oklch(0.78 0.09 230);
  --wt-hydro:            oklch(0.68 0.09 215);
  --wt-biomass:          oklch(0.72 0.11 145);
  --wt-battery:          oklch(0.72 0.11 295);
  --wt-grid:             oklch(0.70 0.012 60);

  --wt-eeg-gen:          oklch(0.80 0.13 142);
  --wt-eeg-con:          oklch(0.78 0.12 326);
  --wt-eeg-saldo:        oklch(0.72 0.12 263);
  --wt-eeg-saldo-neg:    oklch(0.70 0.14 30);

  --wt-shadow-xs:        0 1px 1px oklch(0 0 0 / 0.3);
  --wt-shadow-sm:        0 1px 2px oklch(0 0 0 / 0.35), 0 1px 3px oklch(0 0 0 / 0.25);
  --wt-shadow-md:        0 4px 12px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.25);
  --wt-shadow-lg:        0 12px 28px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.25);
  --wt-shadow-inset:     inset 0 1px 0 oklch(1 0 0 / 0.04);
}

/* ----- Typography ----- */
:root {
  --wt-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --wt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --wt-size-display: 48px;
  --wt-size-h1:      36px;
  --wt-size-h2:      26px;
  --wt-size-h3:      20px;
  --wt-size-h4:      17px;
  --wt-size-body:    15px;
  --wt-size-small:   13px;
  --wt-size-xs:      12px;

  /* Spacing (4px base) */
  --wt-sp-1:  4px;
  --wt-sp-2:  8px;
  --wt-sp-3: 12px;
  --wt-sp-4: 16px;
  --wt-sp-5: 20px;
  --wt-sp-6: 24px;
  --wt-sp-8: 32px;
  --wt-sp-10: 40px;
  --wt-sp-12: 48px;
  --wt-sp-16: 64px;

  /* Radii */
  --wt-r-sm: 6px;
  --wt-r-md: 10px;
  --wt-r-lg: 14px;
  --wt-r-xl: 20px;
  --wt-r-2xl: 28px;
  --wt-r-full: 999px;
}