/* Tema Vidro (claro): painéis brancos translúcidos com desfoque sobre um fundo quente e luminoso,
   com os tokens do tema claro por baixo. Nada de layout muda: só superfícies, bordas, sombras e o fundo.
   Servido como arquivo estático porque o pipeline do Tailwind descarta backdrop-filter sem prefixo. */
.glass {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.26) 100%);
  --glass-bg-strong: rgba(255, 255, 255, 0.60);
  --glass-fill: rgba(255, 255, 255, 0.18);
  --glass-fill-hover: rgba(255, 255, 255, 0.30);
  --glass-fill-active: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(23, 20, 17, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.14);

  --gw-background: transparent;
  --gw-surface: transparent;
  --gw-surface-container-lowest: var(--glass-fill-active);
  --gw-surface-container-low: rgba(255, 255, 255, 0.12);
  --gw-surface-container: var(--glass-fill);
  --gw-surface-container-high: var(--glass-fill-hover);
  --gw-surface-container-highest: rgba(255, 255, 255, 0.48);
  --gw-outline-variant: rgba(23, 20, 17, 0.10);
  --gw-outline: rgba(23, 20, 17, 0.30);
  --gw-primary-container: var(--glass-fill-active);
  --gw-on-primary-container: #3F2C15;
  --gw-secondary-container: rgba(255, 255, 255, 0.55);
  --gw-on-secondary-container: #29221C;
}

/* fundo glassmorphism: base clara com formas coloridas e definidas (azul suave, lavanda, bronze da marca, ardósia),
   para o desfoque dos painéis ter o que desfocar */
.glass body {
  background-color: #E8ECF1;
  background-image:
    radial-gradient(620px 520px at 82% 14%, rgba(92, 132, 196, 0.55) 0%, rgba(92, 132, 196, 0.35) 38%, transparent 62%),
    radial-gradient(540px 480px at 12% 78%, rgba(176, 150, 214, 0.50) 0%, rgba(176, 150, 214, 0.28) 40%, transparent 64%),
    radial-gradient(460px 420px at 68% 86%, rgba(198, 161, 107, 0.55) 0%, rgba(198, 161, 107, 0.30) 40%, transparent 62%),
    radial-gradient(520px 440px at 36% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 40%, transparent 64%),
    radial-gradient(680px 520px at 96% 96%, rgba(58, 76, 108, 0.40) 0%, transparent 60%),
    radial-gradient(420px 360px at 4% 8%, rgba(120, 170, 200, 0.40) 0%, transparent 62%),
    linear-gradient(160deg, #F2F4F8 0%, #E6EAF1 50%, #DDE2EA 100%);
  background-attachment: fixed;
}
.glass body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.glass body > * { position: relative; z-index: 1; }

/* topo e navegação como painéis de vidro */
.glass .gw-app { background: transparent; }
.glass .gw-topbar {
  background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 var(--glass-edge);
}
.glass .gw-nav { padding: 10px 0 10px 10px; }
.glass .gw-nav > nav {
  flex: 1; padding: 10px 8px 12px 0;
  background: var(--glass-bg); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-highlight);
}
.glass .gw-nav__item { margin-left: 8px; border-radius: 14px; padding-inline: 14px 12px; transition: background var(--gw-dur-short-4) var(--gw-ease-standard), transform var(--gw-dur-short-4) var(--gw-ease-standard), box-shadow var(--gw-dur-short-4) var(--gw-ease-standard); }
.glass .gw-nav__item:hover { background: var(--glass-fill-hover); transform: translateX(2px); }
.glass .gw-nav__item[aria-current="page"] { background: var(--glass-fill-active); color: #3F2C15; box-shadow: 0 10px 24px -16px rgba(70, 48, 22, 0.45), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-edge); }
.glass .gw-nav__item[aria-current="page"]::before { display: none; }
.glass .gw-app[data-nav="rail"] .gw-nav__item { margin-left: 6px; margin-right: 6px; }
.glass .gw-nav__count { background: rgba(139, 106, 62, 0.16); color: #5A4224; border-radius: 999px; padding: 0 7px; }
@media (max-width: 720px) {
  .glass .gw-app[data-mobile="open"] .gw-nav { background: var(--glass-bg-strong); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
}

/* conteúdo e cartões */
.glass .gw-content {
  background: var(--glass-bg); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-highlight);
}
.glass .card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0.22) 100%); border-color: var(--glass-border); box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-highlight); }
.glass .gw-search { background: var(--glass-fill-hover); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px var(--glass-edge); }
.glass .gw-search:focus-within { background: var(--glass-fill-active); box-shadow: 0 0 0 1px rgba(139, 106, 62, 0.45); }
.glass .input, .glass select.input, .glass textarea.input { background: rgba(255, 255, 255, 0.40); border-color: var(--glass-edge); }
.glass .input:focus { background: var(--glass-fill-active); }
.glass .btn-primary { box-shadow: 0 12px 24px -14px rgba(23, 20, 17, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.glass .btn-secondary, .glass .gw-chip, .glass .gw-seg { background: var(--glass-fill); border-color: var(--glass-edge); }
.glass .btn-secondary:hover, .glass .gw-chip:hover { background: var(--glass-fill-hover); border-color: rgba(23, 20, 17, 0.2); }
.glass .gw-seg > button[aria-pressed="true"], .glass .gw-seg > a[aria-current="page"] { background: var(--glass-fill-active); color: #29221C; }
.glass .gw-icon-btn:hover { background: var(--glass-fill-hover); }
.glass .gw-snackbar { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.glass footer { background: transparent; border-color: var(--glass-border); }
.glass .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important; }

/* editor de fluxos: canvas e painéis também de vidro */
.glass .flow-canvas, .glass .flow-side, .glass .flow-palette { background: var(--glass-fill); border-color: var(--glass-border); box-shadow: 0 0 0 1px var(--glass-edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glass .flow-node--card, .glass .flow-node--end { background: rgba(255, 255, 255, 0.92); border-color: var(--glass-edge); }

/* variante escura (html.dark.glass), para uso futuro: mesmos painéis em tom de madeira escura */
.glass.dark {
  --glass-bg: rgba(26, 22, 18, 0.52);
  --glass-bg-strong: rgba(26, 22, 18, 0.66);
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-hover: rgba(255, 255, 255, 0.11);
  --glass-fill-active: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-edge: transparent;
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.65);
  --gw-surface-container-low: rgba(255, 255, 255, 0.05);
  --gw-surface-container-highest: var(--glass-fill-active);
  --gw-outline-variant: var(--glass-border);
  --gw-outline: rgba(255, 255, 255, 0.28);
  --gw-on-primary-container: #F3EEE5;
  --gw-secondary-container: var(--glass-fill-active);
  --gw-on-secondary-container: #F3EEE5;
}
.glass.dark body {
  background-color: #120F0C;
  background-image:
    radial-gradient(1200px 820px at 8% -10%, rgba(214, 178, 127, 0.32), transparent 62%),
    radial-gradient(900px 640px at 95% 18%, rgba(139, 106, 62, 0.40), transparent 60%),
    radial-gradient(1000px 760px at 55% 110%, rgba(96, 70, 40, 0.42), transparent 64%),
    linear-gradient(160deg, #1D1814 0%, #14100D 55%, #0F0C0A 100%);
}
.glass.dark .gw-nav__item[aria-current="page"], .glass.dark .gw-seg > button[aria-pressed="true"], .glass.dark .gw-seg > a[aria-current="page"] { color: #F7F1E6; }
.glass.dark .gw-nav__count { background: rgba(214, 178, 127, 0.22); color: #EAD6B4; }
.glass.dark .flow-node--card, .glass.dark .flow-node--end { background: rgba(32, 27, 22, 0.86); border-color: var(--glass-border); }

@media (prefers-reduced-transparency: reduce) {
  .glass .gw-topbar, .glass .gw-nav > nav, .glass .gw-content { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.94); }
  .glass.dark .gw-topbar, .glass.dark .gw-nav > nav, .glass.dark .gw-content { background: rgba(26, 22, 18, 0.94); }
}