/**
 * Finora · Fonte do app (paletas RGBA)
 * Classes:
 *   html.finora-rgba-demo
 *   html.finora-tone-frost | nevoa | rosa | brilho | areia
 * Com RGBA ativo, a fonte escolhida pinta accent + semânticas + UI.
 */

/* —— base RGBA (vidro) —— */
html.finora-rgba-demo {
  --glass-bg: rgba(28, 36, 54, 0.55);
  --glass-bg-strong: rgba(34, 44, 66, 0.68);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-fill: var(--glass-bg);
  --glass-fill-strong: var(--glass-bg-strong);
  --m-card: var(--glass-bg);
  --m-glass: var(--glass-bg);
}

/* helper aliases always wired to semantic tokens */
html.finora-rgba-demo {
  --mint: var(--accent-primary);
  --mint-soft: var(--accent-primary-light);
  --cyan: var(--color-info);
  --green: var(--color-positive);
  --red: var(--color-negative);
  --amber: var(--color-warning);
  --m-accent: var(--accent-primary);
  --m-accent-soft: var(--accent-primary-soft);
  --m-positive: var(--color-positive);
  --m-danger: var(--color-danger);
  --in: var(--color-positive);
  --out: var(--color-negative);
  --positive: var(--color-positive);
  --negative: var(--color-negative);
  --accent: var(--accent-primary);
  --accent-hover: var(--accent-primary-light);
  --danger: var(--color-danger);
  --progress-fill: linear-gradient(
    90deg,
    var(--accent-primary) 0%,
    var(--color-positive) 48%,
    var(--color-warning) 100%
  );
}

/* —— Azul frost —— */
html.finora-rgba-demo.finora-tone-frost {
  --bg-primary: rgba(5, 8, 16, 1);
  --bg-gradient-top: rgba(12, 24, 48, 1);
  --bg-gradient-bottom: rgba(5, 8, 16, 1);
  --bg-glow: radial-gradient(
    ellipse 80% 55% at 88% -8%,
    rgba(110, 180, 255, 0.28) 0%,
    rgba(110, 180, 255, 0.08) 35%,
    transparent 68%
  );
  --bg-screen: var(--bg-glow),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 32%, var(--bg-primary) 100%);
  --accent-primary: rgba(126, 184, 255, 1);
  --accent-primary-soft: rgba(126, 184, 255, 0.20);
  --accent-primary-light: rgba(176, 214, 255, 1);
  --accent-glow: 0 0 22px rgba(126, 184, 255, 0.45);
  --accent-on: rgba(4, 12, 24, 1);
  --color-positive: rgba(110, 210, 180, 1);
  --color-negative: rgba(255, 120, 140, 1);
  --color-warning: rgba(255, 201, 77, 1);
  --color-info: rgba(140, 200, 255, 1);
  --color-danger: rgba(255, 110, 120, 1);
  --glass-bg: rgba(18, 28, 48, 0.58);
  --glass-bg-strong: rgba(24, 36, 58, 0.72);
}

/* —— Verde névoa —— */
html.finora-rgba-demo.finora-tone-nevoa {
  --bg-primary: rgba(5, 10, 9, 1);
  --bg-gradient-top: rgba(10, 28, 22, 1);
  --bg-gradient-bottom: rgba(5, 10, 9, 1);
  --bg-glow: radial-gradient(
    ellipse 80% 55% at 88% -8%,
    rgba(120, 210, 170, 0.26) 0%,
    rgba(120, 210, 170, 0.07) 35%,
    transparent 68%
  );
  --bg-screen: var(--bg-glow),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 32%, var(--bg-primary) 100%);
  --accent-primary: rgba(143, 217, 184, 1);
  --accent-primary-soft: rgba(143, 217, 184, 0.20);
  --accent-primary-light: rgba(180, 235, 205, 1);
  --accent-glow: 0 0 22px rgba(143, 217, 184, 0.45);
  --accent-on: rgba(4, 16, 12, 1);
  --color-positive: rgba(120, 220, 170, 1);
  --color-negative: rgba(255, 130, 140, 1);
  --color-warning: rgba(230, 210, 110, 1);
  --color-info: rgba(150, 220, 200, 1);
  --color-danger: rgba(255, 110, 120, 1);
  --glass-bg: rgba(16, 32, 28, 0.58);
  --glass-bg-strong: rgba(22, 40, 34, 0.72);
}

/* —— Rosa pálido —— */
html.finora-rgba-demo.finora-tone-rosa {
  --bg-primary: rgba(10, 6, 10, 1);
  --bg-gradient-top: rgba(36, 16, 28, 1);
  --bg-gradient-bottom: rgba(10, 6, 10, 1);
  --bg-glow: radial-gradient(
    ellipse 80% 55% at 88% -8%,
    rgba(240, 168, 192, 0.26) 0%,
    rgba(240, 168, 192, 0.07) 35%,
    transparent 68%
  );
  --bg-screen: var(--bg-glow),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 32%, var(--bg-primary) 100%);
  --accent-primary: rgba(240, 168, 192, 1);
  --accent-primary-soft: rgba(240, 168, 192, 0.22);
  --accent-primary-light: rgba(255, 200, 216, 1);
  --accent-glow: 0 0 22px rgba(240, 168, 192, 0.45);
  --accent-on: rgba(24, 8, 14, 1);
  --color-positive: rgba(170, 220, 190, 1);
  --color-negative: rgba(255, 140, 170, 1);
  --color-warning: rgba(255, 200, 150, 1);
  --color-info: rgba(220, 180, 220, 1);
  --color-danger: rgba(255, 120, 150, 1);
  --glass-bg: rgba(36, 18, 30, 0.58);
  --glass-bg-strong: rgba(44, 24, 38, 0.72);
}

/* —— Vermelho brilho —— */
html.finora-rgba-demo.finora-tone-brilho {
  --bg-primary: rgba(10, 5, 6, 1);
  --bg-gradient-top: rgba(40, 12, 14, 1);
  --bg-gradient-bottom: rgba(10, 5, 6, 1);
  --bg-glow: radial-gradient(
    ellipse 80% 55% at 88% -8%,
    rgba(255, 90, 90, 0.28) 0%,
    rgba(255, 90, 90, 0.08) 35%,
    transparent 68%
  );
  --bg-screen: var(--bg-glow),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 32%, var(--bg-primary) 100%);
  --accent-primary: rgba(255, 90, 90, 1);
  --accent-primary-soft: rgba(255, 90, 90, 0.22);
  --accent-primary-light: rgba(255, 140, 140, 1);
  --accent-glow: 0 0 24px rgba(255, 90, 90, 0.5);
  --accent-on: rgba(24, 4, 6, 1);
  --color-positive: rgba(130, 220, 170, 1);
  --color-negative: rgba(255, 110, 120, 1);
  --color-warning: rgba(255, 180, 90, 1);
  --color-info: rgba(255, 150, 150, 1);
  --color-danger: rgba(255, 90, 90, 1);
  --glass-bg: rgba(40, 14, 18, 0.58);
  --glass-bg-strong: rgba(48, 18, 22, 0.72);
}

/* —— Areia —— */
html.finora-rgba-demo.finora-tone-areia {
  --bg-primary: rgba(10, 9, 7, 1);
  --bg-gradient-top: rgba(32, 28, 20, 1);
  --bg-gradient-bottom: rgba(10, 9, 7, 1);
  --bg-glow: radial-gradient(
    ellipse 80% 55% at 88% -8%,
    rgba(212, 196, 168, 0.24) 0%,
    rgba(212, 196, 168, 0.07) 35%,
    transparent 68%
  );
  --bg-screen: var(--bg-glow),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg-gradient-bottom) 32%, var(--bg-primary) 100%);
  --accent-primary: rgba(212, 196, 168, 1);
  --accent-primary-soft: rgba(212, 196, 168, 0.22);
  --accent-primary-light: rgba(232, 220, 196, 1);
  --accent-glow: 0 0 22px rgba(212, 196, 168, 0.4);
  --accent-on: rgba(18, 14, 8, 1);
  --color-positive: rgba(160, 200, 150, 1);
  --color-negative: rgba(220, 140, 120, 1);
  --color-warning: rgba(230, 190, 120, 1);
  --color-info: rgba(190, 180, 150, 1);
  --color-danger: rgba(210, 120, 100, 1);
  --glass-bg: rgba(32, 28, 20, 0.58);
  --glass-bg-strong: rgba(40, 34, 24, 0.72);
}

/* —— UI: RGBA pinta títulos, tabs, KPIs, botões e valores —— */
html.finora-rgba-demo.mobile-finora #mPageHeroTitle,
html.finora-rgba-demo.mobile-finora .m-finora-brand span,
html.finora-rgba-demo.mobile-finora .m-page-hero .m-hello-name {
  color: var(--accent-primary) !important;
  -webkit-text-fill-color: var(--accent-primary) !important;
  text-shadow: var(--accent-glow);
}

html.finora-rgba-demo.mobile-finora .m-tabbar .m-tab.is-on,
html.finora-rgba-demo.mobile-finora .m-tabbar .m-tab.is-on > span:not(.m-tab-ico) {
  color: var(--accent-primary) !important;
}
html.finora-rgba-demo.mobile-finora .m-tabbar .m-tab.is-on .m-tab-ico {
  background-color: var(--accent-primary) !important;
  color: var(--accent-on) !important;
  box-shadow: var(--accent-glow) !important;
}

html.finora-rgba-demo.mobile-finora .m-ios-add.m-fab,
html.finora-rgba-demo.mobile-finora button.m-ios-add.m-fab {
  background: var(--accent-primary) !important;
  box-shadow: var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  color: var(--accent-on) !important;
}

html.finora-rgba-demo.mobile-finora .is-in,
html.finora-rgba-demo.mobile-finora .val.is-in,
html.finora-rgba-demo.mobile-finora .m-activity-val.is-in,
html.finora-rgba-demo.mobile-finora #kpiEntradas,
html.finora-rgba-demo.mobile-finora #kpiEntradas .kpi-rs,
html.finora-rgba-demo.mobile-finora #kpiEntradas .kpi-val,
html.finora-rgba-demo.mobile-finora #mRelSal.is-in,
html.finora-rgba-demo.mobile-finora #mCalcSal.is-in,
html.finora-rgba-demo.mobile-finora .m-spark-leg.is-in {
  color: var(--color-positive) !important;
  -webkit-text-fill-color: var(--color-positive) !important;
}
html.finora-rgba-demo.mobile-finora .m-spark-leg.is-in i {
  background: var(--color-positive) !important;
}

html.finora-rgba-demo.mobile-finora .is-out,
html.finora-rgba-demo.mobile-finora .val.is-out,
html.finora-rgba-demo.mobile-finora .m-activity-val.is-out,
html.finora-rgba-demo.mobile-finora #kpiGastos,
html.finora-rgba-demo.mobile-finora #kpiGastos .kpi-rs,
html.finora-rgba-demo.mobile-finora #kpiGastos .kpi-val,
html.finora-rgba-demo.mobile-finora #mRelSal.is-out,
html.finora-rgba-demo.mobile-finora #mCalcSal.is-out,
html.finora-rgba-demo.mobile-finora .m-spark-leg.is-out {
  color: var(--color-negative) !important;
  -webkit-text-fill-color: var(--color-negative) !important;
}
html.finora-rgba-demo.mobile-finora .m-spark-leg.is-out i {
  background: var(--color-negative) !important;
}

html.finora-rgba-demo.mobile-finora .m-home-orc-pct.is-ok {
  color: var(--color-positive) !important;
}
html.finora-rgba-demo.mobile-finora .m-home-orc-pct.is-warn {
  color: var(--color-warning) !important;
}
html.finora-rgba-demo.mobile-finora .m-home-orc-pct.is-bad {
  color: var(--color-danger) !important;
}
html.finora-rgba-demo.mobile-finora #mHomeOrcBar {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-light)) !important;
}
html.finora-rgba-demo.mobile-finora #mHomeOrcBar.is-ok,
html.finora-rgba-demo.mobile-finora .m-progress i.is-ok {
  background: linear-gradient(90deg, var(--color-positive), var(--accent-primary)) !important;
}
html.finora-rgba-demo.mobile-finora #mHomeOrcBar.is-warn,
html.finora-rgba-demo.mobile-finora .m-progress i.is-warn {
  background: linear-gradient(90deg, var(--accent-primary), var(--color-warning)) !important;
}
html.finora-rgba-demo.mobile-finora #mHomeOrcBar.is-bad,
html.finora-rgba-demo.mobile-finora .m-progress i.is-bad {
  background: linear-gradient(90deg, var(--color-warning), var(--color-danger)) !important;
}
html.finora-rgba-demo.mobile-finora .m-seg .m-seg-btn.is-on,
html.finora-rgba-demo.mobile-finora .m-cfg-list button:focus-visible {
  color: var(--accent-primary) !important;
}
html.finora-rgba-demo.mobile-finora .m-search {
  border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
}

/* —— Pix tab follows tone —— */
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance .m-of-toolbar,
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance ul.m-of-inst-list {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
}
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance .m-of-connect-ico,
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance .m-of-quick-ico {
  background: var(--accent-primary) !important;
  color: var(--accent-on) !important;
}
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance .m-of-connect-hint,
html.finora-rgba-demo.mobile-finora #mScreenOpenFinance .m-cfg-section {
  color: var(--accent-primary) !important;
  -webkit-text-fill-color: var(--accent-primary) !important;
}
html.finora-rgba-demo.mobile-finora #mWooviChargeSheet .m-edit-sheet-card,
html.finora-rgba-demo.mobile-finora #mWooviPaySheet .m-edit-sheet-card,
html.finora-rgba-demo.mobile-finora #mWooviScheduleSheet .m-edit-sheet-card,
html.finora-rgba-demo.mobile-finora #mWooviPixAutoSheet .m-edit-sheet-card {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
}