/* ChargingInsights — Designtokens
   Skandinavisk roligt udtryk: varm off-white, skovgrøn, terracotta */

:root {
  /* Lys */
  --bg: #FBFAF7;
  --bg-elev: #FFFFFF;
  --bg-sunk: #F4F2EC;
  --bg-card-soft: #F7F5F0;
  --line: #E8E4DA;
  --line-strong: #D4CEBE;

  --text: #1A1F1B;
  --text-2: #5C6760;
  --text-3: #8A938C;

  --green: #3F7D5C;
  --green-soft: #DCEAE0;
  --green-pulse: #7AB87A;

  --terracotta: #C97A4A;
  --terracotta-soft: #F5E1D2;

  --sand: #E8DEC9;
  --blue: #5B7BA8;
  --blue-soft: #DBE3EE;

  --warn: #B5793A;
  --offline: #9A9A9A;

  /* Type */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-6: 28px;

  /* Shadow */
  --sh-1: 0 1px 0 rgba(20, 24, 20, 0.04);
  --sh-2: 0 1px 2px rgba(20, 24, 20, 0.05), 0 4px 12px rgba(20, 24, 20, 0.04);
  --sh-3: 0 2px 4px rgba(20, 24, 20, 0.06), 0 8px 24px rgba(20, 24, 20, 0.06);
}

[data-theme="dark"] {
  --bg: #0E1311;
  --bg-elev: #161C18;
  --bg-sunk: #0A0F0C;
  --bg-card-soft: #131A16;
  --line: #232B26;
  --line-strong: #34403A;

  --text: #F0EDE6;
  --text-2: #A8B0AA;
  --text-3: #6E776F;

  --green: #7AB87A;
  --green-soft: #1F2F26;
  --green-pulse: #9CD49C;

  --terracotta: #E0936B;
  --terracotta-soft: #2E2118;

  --sand: #2C2820;
  --blue: #8AA8D0;
  --blue-soft: #1B2330;

  --warn: #D89B5A;
  --offline: #6E776F;

  --sh-1: 0 1px 0 rgba(0,0,0,0.3);
  --sh-2: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.3);
  --sh-3: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Hjælpe-klasser */
.ci-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.ci-mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.ci-tnum { font-variant-numeric: tabular-nums; }

/* Charging puls */
@keyframes ci-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.ci-pulse-dot { animation: ci-pulse 1.6s ease-in-out infinite; }

/* Subtil charging bar fyldning */
@keyframes ci-flow {
  0% { background-position: 0 0; }
  100% { background-position: 24px 0; }
}
.ci-flow {
  background-image: linear-gradient(
    -45deg,
    rgba(255,255,255,0.25) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.25) 75%, transparent 75%, transparent
  );
  background-size: 24px 24px;
  animation: ci-flow 1.2s linear infinite;
}

button { font-family: inherit; cursor: pointer; }