/* Enerzee × modern product UI
   Brand: deep forest + lime energy (APN) · Apple-like clarity
   Signature: status-faixa card
*/

:root {
  /* Brand — PDF direction + lime signature */
  --ez-forest-deep: #263500;
  --ez-forest: #526d00;
  --ez-leaf: color-mix(in srgb, var(--ez-lime) 72%, #526d00);
  --ez-lime: #C9F53C;  /* Nova Cor */
  --ez-lime-text: #263500;
  --ez-lime-soft: #d4ff3a;
  --ez-progress-mid: #1f9b68;
  --ez-progress-end: #06281d;
  --ez-mint: color-mix(in srgb, var(--ez-lime) 14%, white);
  --ez-mint-strong: color-mix(in srgb, var(--ez-lime) 32%, white);

  /* Surfaces — cooler, more premium neutrals */
  --ez-bg: #eef3f0;
  --ez-bg-glow: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--ez-lime) 12%, transparent), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--ez-lime) 10%, transparent), transparent 45%),
    #eef3f0;
  --ez-body-bg: #000000;
  --ez-device-screen-bg: #111800;
  --ez-header-bg: rgba(238, 243, 240, 0.72);
  --ez-tabbar-bg: rgba(255, 255, 255, 0.92);
  --ez-login-bg: #111800;
  --ez-glass-border: rgba(255, 255, 255, 0.65);
  --ez-elevated-bg: rgba(255, 255, 255, 0.9);
  --ez-elevated-bg-hover: rgba(255, 255, 255, 0.98);
  --ez-soft-panel: color-mix(in srgb, var(--ez-mint) 18%, white);
  --ez-soft-panel-strong: color-mix(in srgb, var(--ez-mint) 42%, white);
  --ez-on-accent-dark: #263500;
  --ez-on-accent-light: #ffffff;
  --ez-warning-bg: #fff6e5;
  --ez-warning-border: #f0d7a0;
  --ez-warning-ink: #7a4a00;
  --ez-info-bg: #eaf3ff;
  --ez-info-border: #c8def8;
  --ez-info-ink: #0a4a8a;
  --ez-danger-bg: #ffe5e3;
  --ez-danger-border: #f5c0bc;
  --ez-danger-ink: #8a1f18;
  --ez-ok-bg: color-mix(in srgb, var(--ez-lime) 22%, white);
  --ez-ok-border: color-mix(in srgb, var(--ez-lime) 44%, white);
  --ez-ok-ink: #526d00;
  --ez-surface: rgba(255, 255, 255, 0.86);
  --ez-surface-solid: #ffffff;
  --ez-surface-secondary: #e6eee9;
  --ez-separator: rgba(15, 40, 30, 0.08);
  --ez-separator-strong: rgba(15, 40, 30, 0.14);

  /* Ink */
  --ez-ink: #0f1a15;
  --ez-ink-secondary: #5b6b63;
  --ez-ink-tertiary: #8a9790;
  --ez-ink-on-brand: #ffffff;

  /* Status faixa */
  --ez-faixa-verde: #6f8f00;
  --ez-faixa-verde-soft: color-mix(in srgb, var(--ez-lime) 24%, white);
  --ez-faixa-amarelo: #e6a817;
  --ez-faixa-amarelo-soft: #fff4d6;
  --ez-faixa-vermelho: #e03a30;
  --ez-faixa-vermelho-soft: #ffe5e3;

  /* Accents */
  --ez-blue: #0a84ff;
  --ez-orange: #ff9f0a;
  --ez-red: #ff3b30;
  --ez-green: var(--ez-lime);
  --ez-purple: #bf5af2;
  --ez-brl: #526d00;
  --ez-ecash: #6b4ea3;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-hero: 2.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space */
  --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;

  /* Radius — slightly larger, more iOS 17+ */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(6, 40, 29, 0.04), 0 8px 24px rgba(6, 40, 29, 0.06);
  --shadow-float: 0 12px 40px rgba(6, 40, 29, 0.14);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--ez-lime) 18%, transparent),
    0 10px 30px color-mix(in srgb, var(--ez-lime) 18%, transparent);

  /* Chrome */
  --header-h: 58px;
  --tabbar-h: 50px;

  /* Safe-area real do aparelho. O piso existe porque `env()` devolve 0 no navegador
     do celular e no desktop; sem ele o header cola no topo da viewport. Os valores
     largos (Dynamic Island, home indicator) só valem na moldura de demo, que não tem
  safe-area de sistema nenhuma — ver `.is-framed` em app.css. */
  --safe-top: env(safe-area-inset-top, 0px);
  --visual-viewport-bottom: 0px;
  --safe-bottom: max(10px, env(safe-area-inset-bottom, 0px), var(--visual-viewport-bottom));
  --chrome-top: max(var(--safe-top), var(--space-2));

  --app-max: 430px;

  /* Desktop: a tabbar vira coluna e o conteúdo ganha um teto legível. */
  --sidebar-w: 300px;
  --content-max: 1110px;
  /* Desktop: a tabbar vira coluna e o conteúdo ganha um teto legível.
     1080 sobrava demais em monitor 1920 (a coluna colada na sidebar deixava uma
     tira enorme de fundo vazio à direita); 1320 encolhe essa tira sem virar
     linha de texto de 2000px nos monitores comuns (~1366-1440, onde o teto nem
     chega a ser tocado — a coluna já nasce mais estreita que isso). */
  --sidebar-w: 300px;
  --content-max: 1320px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
}

html.theme-dark {
  color-scheme: dark;

  --ez-lime-text: #C9F53C;
  --ez-bg: #0b0f13;
  --ez-bg-glow: radial-gradient(100% 72% at 50% -12%, color-mix(in srgb, var(--ez-lime) 10%, transparent), transparent 56%),
    radial-gradient(86% 60% at 100% 0%, rgba(80, 120, 255, 0.06), transparent 48%),
    #0b0f13;
  --ez-dark-glow-a: color-mix(in srgb, var(--ez-lime) 9%, transparent);
  --ez-dark-glow-b: rgba(92, 124, 250, 0.055);
  --ez-dark-glow-c: rgba(255, 255, 255, 0.035);
  --ez-dark-grad-base: linear-gradient(145deg, #111820 0%, #18212a 100%);
  --ez-dark-grad-soft: radial-gradient(110% 90% at 100% 0%, var(--ez-dark-glow-a), transparent 56%),
    radial-gradient(90% 80% at 0% 100%, var(--ez-dark-glow-b), transparent 60%),
    var(--ez-dark-grad-base);
  --ez-body-bg: #000000;
  --ez-device-screen-bg: #070a0d;
  --ez-header-bg: rgba(13, 17, 22, 0.82);
  --ez-tabbar-bg: rgba(12, 16, 21, 0.94);
  --ez-login-bg: #03140e;
  --ez-glass-border: rgba(229, 238, 245, 0.08);
  --ez-elevated-bg: rgba(22, 27, 34, 0.94);
  --ez-elevated-bg-hover: rgba(31, 38, 48, 0.98);
  --ez-soft-panel: #151b22;
  --ez-soft-panel-strong: #1b232c;
  --ez-on-accent-dark: #07100b;
  --ez-on-accent-light: #f4fff8;
  --ez-warning-bg: rgba(230, 168, 23, 0.15);
  --ez-warning-border: rgba(230, 168, 23, 0.34);
  --ez-warning-ink: #ffd16a;
  --ez-info-bg: rgba(10, 132, 255, 0.14);
  --ez-info-border: rgba(10, 132, 255, 0.34);
  --ez-info-ink: #9dccff;
  --ez-danger-bg: rgba(224, 58, 48, 0.16);
  --ez-danger-border: rgba(224, 58, 48, 0.34);
  --ez-danger-ink: #ffb4ae;
  --ez-ok-bg: color-mix(in srgb, var(--ez-lime) 14%, transparent);
  --ez-ok-border: color-mix(in srgb, var(--ez-lime) 30%, transparent);
  --ez-ok-ink: #fdfdfd;
  --ez-surface: rgba(22, 27, 34, 0.9);
  --ez-surface-solid: #151a21;
  --ez-surface-secondary: #1d242d;
  --ez-separator: rgba(229, 238, 245, 0.08);
  --ez-separator-strong: rgba(229, 238, 245, 0.14);

  --ez-ink: #f1f5f4;
  --ez-ink-secondary: #a9b4b1;
  --ez-ink-tertiary: #75817e;
  --ez-ink-on-brand: #0b0f13;
  --ez-forest-deep: #dcebe4;
  --ez-forest: #fbfffd;
  --ez-leaf: var(--ez-lime);
  --ez-faixa-verde-soft: color-mix(in srgb, var(--ez-lime) 14%, transparent);
  --ez-faixa-amarelo-soft: rgba(230, 168, 23, 0.16);
  --ez-faixa-vermelho-soft: rgba(224, 58, 48, 0.16);
  --ez-mint: #1a2b24;
  --ez-mint-strong: #294237;
  --ez-brl: #8fdab1;
  --ez-ecash: #b9adff;

  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.28), 0 12px 30px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.42);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--ez-lime) 14%, transparent),
    0 12px 34px color-mix(in srgb, var(--ez-lime) 12%, transparent);
}