/* GENERATED — NICHT EDITIEREN.
 * Quelle: crowdergy-design v1.0.0 (scripts/sync-design.sh).
 * Design-Änderungen: Claude-Design-Projekt -> Export ins
 * Design-Repo -> Tag -> DESIGN_VERSION bumpen -> sync.
 * fonts.css ausgelassen (self-hosted, web/assets/fonts/). */
/*
 * Crowdergy — Color tokens
 * Source of truth: colinwilke/crowdergy-ios → crowdergy/Design/DesignSystem.swift (TOGColor)
 *
 * Crowdergy is a DARK-FIRST product. The canonical surface is a deep
 * navy-black; every device type carries a saturated accent so power
 * flows are legible at a glance. Text hierarchy is opacity-based white.
 */
:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --color-bg:             #080b12;                    /* TOGColor.background — deep navy black */
  --color-surface:        rgba(255, 255, 255, 0.03);  /* TOGColor.surface — faint raised fill */
  --color-surface-2:      rgba(255, 255, 255, 0.06);  /* hover / pressed surface */
  --color-surface-border: rgba(255, 255, 255, 0.07);  /* TOGColor.surfaceBorder — hairline */
  --color-glass-fill:     rgba(15, 18, 25, 0.85);     /* GlassCard inner fill over blur */

  /* ── Device accent colors ─────────────────────────────── */
  --color-solar:            #fbbf24;  /* amber — PV / solar */
  --color-battery:          #4ade80;  /* green — battery charging / online */
  --color-battery-discharge:#15803d;  /* dark green — battery discharging */
  --color-wallbox:          #38bdf8;  /* sky blue — EV wallbox */
  --color-grid:             #9ca3af;  /* neutral gray — grid / Netz */
  --color-haushalt:         #a78bfa;  /* violet — household consumer */
  --color-heatpump:         #f97316;  /* orange — heat pump / Wärme */
  --color-warmwater:        #f472b6;  /* pink — hot water / Warmwasser */

  /* ── Status ───────────────────────────────────────────── */
  --color-online:    #4ade80;  /* connected / healthy (= battery green) */
  --color-offline:   #f87171;  /* disconnected / error / grid draw */
  --color-flex:      #38bdf8;  /* flexibility active (= wallbox sky) */

  /* ── Brand / energy-graph ─────────────────────────────── */
  --color-node-green-dark: #1b702d;  /* node radial-fill base */
  --color-node-edge:       #3ba848;  /* resting graph edge */
  --color-solar-yellow:    #f3d446;  /* brand "//" bars + flow glow */
  --color-brand-green-mid: #4caf50;  /* logo mid green */
  --color-brand-green-dk:  #2d7a2d;  /* logo dark green */

  /* ── Text hierarchy (on dark bg) ──────────────────────── */
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.62);
  --color-text-tertiary:  rgba(255, 255, 255, 0.45);
  --color-on-accent:      #000000;   /* black text on solar-yellow CTAs */

  /* ── Semantic aliases ─────────────────────────────────── */
  --bg-app:          var(--color-bg);
  --bg-surface:      var(--color-surface);
  --bg-card:         var(--color-glass-fill);
  --border-card:     var(--color-surface-border);
  --fg-primary:      var(--color-text-primary);
  --fg-secondary:    var(--color-text-secondary);
  --fg-tertiary:     var(--color-text-tertiary);
  --accent-primary:  var(--color-solar);    /* default CTA accent */
  --accent-success:  var(--color-online);
  --accent-danger:   var(--color-offline);
}
/*
 * Crowdergy — Spacing, radii, shadows
 * Source: colinwilke/crowdergy-ios → DesignSystem.swift (TOGSpacing) + GlassCard
 *
 * A compact 4-based scale. Cards use 12px internal padding when dense
 * (device tiles) and 20px when roomy (default GlassCard). Radii are
 * generous: 12px for inputs/buttons, 16px for cards.
 */
:root {
  /* Spacing — TOGSpacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm:   12px;  /* inputs, buttons, segments */
  --radius-md:   16px;  /* GlassCard — primary container */
  --radius-pill: 999px; /* pills, capsules, status dots */

  /* Shadows */
  --shadow-card: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-dot:  0 0 4px;  /* status-dot glow (color set per use) */

  /* Effects */
  --blur-glass: 20px;     /* GlassCard backdrop blur */
  --border-hairline: 1px;
}
/*
 * Crowdergy — Typography tokens
 * Source: colinwilke/crowdergy-ios → DesignSystem.swift (TOGFont)
 *
 * Two families only:
 *   • Manrope (display)  — wordmark, headings, big numeric readouts.
 *                          Weights: 700 default, 800 (heavy) for the wordmark.
 *                          Display headings carry tight negative tracking.
 *   • JetBrains Mono     — labels, status, data columns, button text.
 *                          Section labels are UPPERCASE + 0.06em tracking.
 *
 * NOTE: the iOS app applies a global ×1.15 size multiplier (TOGFont.scale)
 * for on-device legibility. The web scale below uses the un-multiplied
 * base values; bump by 1.15 only if matching a device screenshot exactly.
 */
:root {
  --font-display: 'Manrope', 'SF Pro Rounded', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Display scale — Manrope, bold (700) */
  --text-display-xs: 16px;  /* card / district headings */
  --text-display-sm: 20px;  /* section headings */
  --text-display-md: 28px;  /* power readings on tiles */
  --text-display-lg: 32px;  /* app title / login / hero */
  --text-display-xl: 40px;  /* marketing hero */

  /* Mono scale — JetBrains Mono */
  --text-mono-2xs: 10px;  /* sparkline / tiny indicators */
  --text-mono-xs:  11px;  /* secondary labels, section headers */
  --text-mono-sm:  12px;  /* tile headers, field labels */
  --text-mono-md:  13px;  /* body text, list rows */
  --text-mono-lg:  14px;  /* prominent labels */
  --text-mono-xl:  16px;  /* primary button text */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* Tracking */
  --track-display-tight: -0.02em;  /* ≥32px headings + wordmark */
  --track-label:          0.06em;  /* uppercase mono labels */
}

/* ── Display classes ──────────────────────────────────────── */
.tog-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: 700; color: var(--fg-primary); letter-spacing: -0.02em; line-height: 1.05; }
.tog-display-md { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; line-height: 1.1; }
.tog-display-sm { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: 700; color: var(--fg-primary); line-height: 1.15; }
.tog-display-xs { font-family: var(--font-display); font-size: var(--text-display-xs); font-weight: 700; color: var(--fg-primary); line-height: 1.2; }

/* ── Mono classes ─────────────────────────────────────────── */
.tog-mono-xl  { font-family: var(--font-mono); font-size: var(--text-mono-xl);  font-weight: 600; color: var(--fg-primary); }
.tog-mono-lg  { font-family: var(--font-mono); font-size: var(--text-mono-lg);  font-weight: 500; color: var(--fg-primary); }
.tog-mono-md  { font-family: var(--font-mono); font-size: var(--text-mono-md);  font-weight: 400; color: var(--fg-secondary); }
.tog-mono-sm  { font-family: var(--font-mono); font-size: var(--text-mono-sm);  font-weight: 400; color: var(--fg-secondary); }
.tog-mono-xs  { font-family: var(--font-mono); font-size: var(--text-mono-xs);  font-weight: 400; color: var(--fg-secondary); }
.tog-mono-2xs { font-family: var(--font-mono); font-size: var(--text-mono-2xs); font-weight: 400; color: var(--fg-tertiary); }

/* Uppercase section label — the app's signature label treatment */
.tog-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-secondary);
}
/*
 * Crowdergy — Liquid-Glass material tokens
 * Source inspiration: crowdergy-ios → LiquidGlassModifier.swift
 * (Glass.clear + dimming layer) and Apple's iOS 26 Liquid Glass.
 *
 * The Crowdergy take is SUBTLE: today's dark glass, just more
 * translucent, with blur+saturation and a specular inset shine.
 * A dimming layer sits UNDER the material on busy backgrounds
 * (the "PhotoGlass" pattern) so text stays legible.
 */
:root {
  /* Material */
  --glass-fill:        rgba(20, 26, 38, 0.55);   /* translucent card fill (was .85 opaque) */
  --glass-fill-strong: rgba(15, 18, 25, 0.85);   /* legacy/opaque fallback & dense data */
  --glass-blur:        24px;
  --glass-saturate:    160%;
  --glass-border:      rgba(255, 255, 255, 0.10);

  /* Specular shine — inset top-left highlight + faint bottom-right */
  --glass-shine:
    inset 1px 1px 1px rgba(255, 255, 255, 0.10),
    inset -1px -1px 1px rgba(255, 255, 255, 0.04); /* @kind shadow */

  /* Dimming layer for photo/busy backgrounds (PhotoGlass) */
  --glass-dim: rgba(0, 0, 0, 0.22);

  /* Floating capsule chrome (tab bar, pills) */
  --glass-capsule-fill: rgba(18, 24, 35, 0.62);
  --glass-capsule-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* Atmosphere — large soft gradients living BEHIND the glass.
     Use with opacity scaled by surface needs (0.5–1). */
  --atmo-green:  radial-gradient(120% 60% at 50% -8%, rgba(74, 222, 128, 0.20), transparent 55%); /* @kind other */
  --atmo-amber:  radial-gradient(70% 50% at 88% 95%, rgba(251, 191, 36, 0.10), transparent 60%); /* @kind other */
  --atmo-sky:    radial-gradient(60% 45% at 0% 60%, rgba(56, 189, 248, 0.08), transparent 60%); /* @kind other */
}

/* Ready-made material class */
.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card), var(--glass-shine);
  border-radius: var(--radius-md);
}
.glass--capsule {
  border-radius: var(--radius-pill);
  background: var(--glass-capsule-fill);
  box-shadow: var(--glass-capsule-shadow), var(--glass-shine);
}