/* =============================================================
   FLOWLY — DESIGN TOKENS
   Fonte única de variáveis CSS. Namespace --flowly-*.
   NUNCA declare tokens --flowly-* em outro arquivo.
   Ver docs/DESIGN-SYSTEM.md.
   ============================================================= */

/* Fontes carregadas via <link> em index.html para evitar @import bloqueante */

:root {
    /* Superfícies */
    --flowly-bg-body: #08090e;
    --flowly-body-accent-opacity: 0.04;
    --flowly-body-accent-purple: 0.03;
    --flowly-body-accent-light: 0;
    /* 2º brilho do fundo — cada tema (paleta) troca a cor. */
    --flowly-glow-2-rgb: 168 85 247;
    --flowly-bg-body-gradient: radial-gradient(ellipse 60% 40% at 14% 8%, rgb(var(--flowly-accent-primary-rgb) / var(--flowly-body-accent-opacity)) 0%, transparent 65%),
                               radial-gradient(ellipse 42% 26% at 88% 84%, rgb(var(--flowly-glow-2-rgb) / var(--flowly-body-accent-purple)) 0%, transparent 65%);
    --flowly-bg-elevated: rgba(14, 15, 20, 0.78);
    --flowly-bg-elevated-hover: rgba(18, 19, 26, 0.88);
    /* Overlays flutuantes (modais, popovers, expansão). Só no stylesheet —
       o engine de presets (theme-ai) NÃO sobrescreve este token. */
    --flowly-bg-overlay: rgba(18, 19, 26, 0.92);
    --flowly-bg-glass: rgba(255, 255, 255, 0.028);
    --flowly-bg-glass-strong: rgba(255, 255, 255, 0.06);
    --flowly-bg-glass-hover: rgba(255, 255, 255, 0.08); /* existia só no tema claro; o dark caía no fallback */
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(10, 11, 15, 0.98) 0%, rgba(11, 12, 18, 0.96) 100%);
    --flowly-bg-bottom-nav: rgba(10, 11, 15, 0.9);

    /* Texto */
    --flowly-text-primary: #f0eff4;
    --flowly-text-secondary: #8e8a98;
    --flowly-text-tertiary: #7c7889;
    --flowly-text-muted: rgba(255, 255, 255, 0.3); /* riscos/decorações; era usado sem existir */
    --flowly-text-inverse: #08090e;

    /* Bordas */
    --flowly-border-subtle: rgba(255, 255, 255, 0.055);
    --flowly-border-muted: rgba(255, 255, 255, 0.07);
    --flowly-border-strong: rgba(255, 255, 255, 0.12);
    --flowly-border-active: rgb(var(--flowly-accent-primary-rgb) / 0.24);

    /* "Passado / apagado" — header de dia/semana/mês anterior.
       Dark usa branco a 28%; light usa preto a 38% (precisa de mais
       contraste pq sem fundo escuro pra se destacar). */
    --flowly-past-day-opacity: 0.72;
    --flowly-past-day-text: rgba(255, 255, 255, 0.28);
    /* Task done: no dark mantemos opacity, em light o cinza claro ja esmaece
       o suficiente — multiplicar por opacity vira invisivel. */
    --flowly-task-done-opacity: 0.5;
    --flowly-task-done-text: inherit;
    /* Cor do .task-label (era hardcoded rgba branco). */
    --flowly-task-label-color: rgba(255, 255, 255, 0.85);
    /* Cor do botão de timer (.task-item-timer-btn). */
    --flowly-task-timer-color: rgba(255, 255, 255, 0.36);

    /* Painéis — usados por Analytics/Dia/Semana/Today/Focus (antes só fallback) */
    --flowly-panel: rgba(255, 255, 255, 0.02);
    --flowly-border: rgba(255, 255, 255, 0.07);

    /* Acentos — PRIMARY é verde (personalizável via --flowly-user-accent) */
    --flowly-accent-primary: var(--flowly-user-accent, #22c55e);
    --flowly-accent-primary-rgb: var(--flowly-user-accent-rgb, 34 197 94);
    --flowly-accent-success: #22c55e;
    --flowly-accent-success-rgb: 34 197 94;
    --flowly-accent-info: #0A84FF;
    --flowly-accent-info-rgb: 10 132 255;
    --flowly-accent-warning: #FF9F0A;
    --flowly-accent-warning-rgb: 255 159 10;
    --flowly-accent-danger: #FF5C4D;
    --flowly-accent-danger-rgb: 255 92 77;
    --flowly-accent-purple: #a855f7;
    --flowly-accent-purple-rgb: 168 85 247;
    --flowly-accent-pink: #ec4899;

    /* Variantes "soft" pra TEXTO sobre fundo escuro (badges/chips) — o accent
       saturado é forte demais como texto pequeno. Tom 300 da família. */
    --flowly-accent-danger-soft: #fca5a5;
    --flowly-accent-warning-soft: #fcd34d;
    --flowly-accent-success-soft: #86efac;
    --flowly-accent-primary-dim: rgb(var(--flowly-accent-primary-rgb) / 0.14);
    --flowly-accent-success-dim: rgb(var(--flowly-accent-success-rgb) / 0.14);
    --flowly-accent-danger-dim: rgb(var(--flowly-accent-danger-rgb) / 0.14);

    /* Paleta de data-viz (gráficos/legendas). Fonte única — antes cada gráfico
       inventava seu hex (analytics/goals divergiam). Ordem pensada pra
       máxima distinção entre fatias adjacentes. Reusa os accents do sistema. */

    /* Tags Notion-style */
    --flowly-tag-gray: #8e8a98;
    --flowly-tag-blue: #0A84FF;
    --flowly-tag-green: #22c55e;
    --flowly-tag-yellow: #FFD60A;
    --flowly-tag-orange: #FF9F0A;
    --flowly-tag-red: #FF5C4D;
    --flowly-tag-pink: #ec4899;
    --flowly-tag-purple: #a855f7;
    --flowly-tag-brown: #a77a4c;

    /* Tipografia */
    --flowly-font-main: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --flowly-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --flowly-font-mono: ui-monospace, 'SF Mono', Menlo, 'JetBrains Mono', Consolas, monospace;

    /* Multiplicadores da aba Visual (theme-ai grava inline): tamanho do texto,
       arredondamento e densidade. 1/1/0 = visual padrão. */
    --flowly-text-k: 1;
    --flowly-radius-k: 1;
    --flowly-density-pad: 0px;

    --flowly-text-2xs: calc(0.6875rem * var(--flowly-text-k));
    --flowly-text-xs:  calc(0.75rem * var(--flowly-text-k));
    --flowly-text-sm:  calc(0.8125rem * var(--flowly-text-k));
    --flowly-text-base: calc(0.9375rem * var(--flowly-text-k));
    --flowly-text-xl:  calc(1.25rem * var(--flowly-text-k));
    --flowly-text-2xl: calc(1.5rem * var(--flowly-text-k));
    --flowly-text-3xl: calc(2rem * var(--flowly-text-k));

    --flowly-line-tight: 1.15;
    --flowly-line-snug: 1.3;
    --flowly-line-base: 1.5;

    --flowly-weight-medium: 500;
    --flowly-weight-semibold: 600;
    --flowly-weight-bold: 700;
    --flowly-weight-black: 800;

    --flowly-letter-tight: -0.02em;
    --flowly-letter-snug: -0.01em;
    --flowly-letter-wide: 0.04em;
    --flowly-letter-wider: 0.12em;

    /* Radius */
    --flowly-radius-sm: 8px;
    --flowly-radius-md: 12px;
    --flowly-radius-lg: 16px;
    --flowly-radius-xl: calc(22px * var(--flowly-radius-k));
    --flowly-radius-2xl: calc(28px * var(--flowly-radius-k));
    --flowly-radius-full: 9999px;

    /* Sombras */
    --flowly-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --flowly-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
    --flowly-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --flowly-shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.55);
    --flowly-shadow-glow-primary: 0 8px 22px rgb(var(--flowly-accent-primary-rgb) / 0.26);

    /* Blur */
    --flowly-blur-subtle: 8px;
    --flowly-blur-panel: 12px;
    --flowly-blur-modal: 24px;

    /* Espaçamento */
    --flowly-space-1: 4px;
    --flowly-space-2: 8px;
    --flowly-space-3: 12px;
    --flowly-space-4: 16px;
    --flowly-space-5: 20px;
    --flowly-space-6: 24px;
    --flowly-space-7: 28px;
    --flowly-space-8: 32px;
    --flowly-space-10: 40px;
    --flowly-space-12: 48px;

    /* Layout */
    --flowly-shell-max: 1280px;
    --flowly-shell-max-narrow: 1120px;
    --flowly-shell-max-wide: 1400px;
    --flowly-sidebar-width: clamp(188px, 16vw, 212px);
    --flowly-sidebar-icon-width: 56px;
    --flowly-mobile-nav-height: 64px;

    /* Motion */
    --flowly-duration-fast: 150ms;
    --flowly-duration-base: 220ms;
    --flowly-duration-slow: 380ms;
    --flowly-transition-base: var(--flowly-duration-base) var(--flowly-ease-out);
    --flowly-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --flowly-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --flowly-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* leve passada do alvo: mola */

    /* Z-index */
    --flowly-z-dropdown: 100;
    --flowly-z-sidebar: 200;
    --flowly-z-overlay: 500;
    --flowly-z-modal: 1000;
    --flowly-z-toast: 2000;
    --flowly-z-noise: 9999;
}

/* =============================================================
   ALIASES DE COMPATIBILIDADE — tokens legados resolvem pros --flowly-*
   ============================================================= */
:root {

    /* Bordas */
    --border-subtle: var(--flowly-border-subtle);
    --border-active: var(--flowly-border-active);
    --border-panel: var(--flowly-border-muted);

    /* Acentos legados */
    --accent-blue: var(--flowly-accent-info);
    --accent-orange: var(--flowly-accent-warning);
    --accent-primary-rgb: var(--flowly-accent-primary-rgb);
    --accent-secondary-rgb: var(--flowly-accent-warning-rgb);

    /* Radius */
    --radius-sm: var(--flowly-radius-sm);
    --radius-md: var(--flowly-radius-md);
    --radius-lg: var(--flowly-radius-lg);

    /* Sombras */
    --shadow-panel: var(--flowly-shadow-md);
    --shadow-card: var(--flowly-shadow-sm);
    --shadow-card-hover: var(--flowly-shadow-md);
    --shadow-glow-blue: var(--flowly-shadow-glow-primary);

    /* Painel */
    --surface-panel: var(--flowly-bg-elevated);
    --surface-panel-strong: var(--flowly-bg-elevated-hover);
    --surface-panel-elevated: var(--flowly-bg-elevated-hover);
    --panel-blur: var(--flowly-blur-panel);

    /* Shell */
    --shell-max-width: var(--flowly-shell-max);
    --shell-max-width-narrow: var(--flowly-shell-max-narrow);
    --shell-max-width-wide: var(--flowly-shell-max-wide);

    /* Tipografia */
    --font-main: var(--flowly-font-main);
    --font-display: var(--flowly-font-display);

}

/* =============================================================
   TEMAS (paletas) — <html data-flowly-palette="…"> (theme-ai.js).
   Só fundo, barra lateral, overlays, texto e o 2º brilho; superfícies
   são vidro sobre o fundo e herdam o tom. A cor de destaque vem do
   --flowly-user-accent. "flowly" repete o padrão pra miniatura da galeria.
   Blocos escuros ANTES do [data-theme="light"]; claros depois.
   ============================================================= */
[data-flowly-palette="flowly"] {
    --flowly-bg-body: #08090e;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(10, 11, 15, 0.98) 0%, rgba(11, 12, 18, 0.96) 100%);
    --flowly-bg-overlay: rgba(18, 19, 26, 0.92);
    --flowly-bg-bottom-nav: rgba(10, 11, 15, 0.9);
    --flowly-text-primary: #f0eff4;
    --flowly-text-secondary: #8e8a98;
    --flowly-text-tertiary: #7c7889;
    --flowly-glow-2-rgb: 168 85 247;
}
[data-flowly-palette="oceano"] {
    --flowly-bg-body: #060d17;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(7, 14, 26, 0.98) 0%, rgba(8, 17, 31, 0.96) 100%);
    --flowly-bg-overlay: rgba(12, 22, 38, 0.94);
    --flowly-bg-bottom-nav: rgba(7, 14, 26, 0.9);
    --flowly-text-primary: #eef4fb;
    --flowly-text-secondary: #8c9bb0;
    --flowly-text-tertiary: #74849a;
    --flowly-glow-2-rgb: 56 189 248;
}
[data-flowly-palette="indigo"] {
    --flowly-bg-body: #0a0a12;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(12, 12, 21, 0.98) 0%, rgba(13, 13, 24, 0.96) 100%);
    --flowly-bg-overlay: rgba(20, 20, 34, 0.94);
    --flowly-bg-bottom-nav: rgba(12, 12, 21, 0.9);
    --flowly-text-primary: #eeeef8;
    --flowly-text-secondary: #8f8fa8;
    --flowly-text-tertiary: #7a7a94;
    --flowly-glow-2-rgb: 236 72 153;
}
[data-flowly-palette="uva"] {
    --flowly-bg-body: #0e0914;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(17, 11, 25, 0.98) 0%, rgba(19, 12, 28, 0.96) 100%);
    --flowly-bg-overlay: rgba(27, 18, 38, 0.94);
    --flowly-bg-bottom-nav: rgba(17, 11, 25, 0.9);
    --flowly-text-primary: #f3eefa;
    --flowly-text-secondary: #9a8cab;
    --flowly-text-tertiary: #85779a;
    --flowly-glow-2-rgb: 99 102 241;
}
[data-flowly-palette="rose"] {
    --flowly-bg-body: #120a0e;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(21, 12, 17, 0.98) 0%, rgba(24, 13, 19, 0.96) 100%);
    --flowly-bg-overlay: rgba(33, 19, 26, 0.94);
    --flowly-bg-bottom-nav: rgba(21, 12, 17, 0.9);
    --flowly-text-primary: #f9eef2;
    --flowly-text-secondary: #a8909a;
    --flowly-text-tertiary: #927a85;
    --flowly-glow-2-rgb: 251 146 60;
}
[data-flowly-palette="ambar"] {
    --flowly-bg-body: #100c06;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(19, 15, 8, 0.98) 0%, rgba(22, 17, 9, 0.96) 100%);
    --flowly-bg-overlay: rgba(31, 25, 15, 0.94);
    --flowly-bg-bottom-nav: rgba(19, 15, 8, 0.9);
    --flowly-text-primary: #f7f1e6;
    --flowly-text-secondary: #a39580;
    --flowly-text-tertiary: #8c7f6b;
    --flowly-glow-2-rgb: 239 68 68;
}
[data-flowly-palette="nord"] {
    --flowly-bg-body: #2e3440;
    --flowly-bg-sidebar: linear-gradient(180deg, #2b303b 0%, #2e3440 100%);
    --flowly-bg-overlay: rgba(59, 66, 82, 0.97);
    --flowly-bg-bottom-nav: rgba(46, 52, 64, 0.92);
    --flowly-text-primary: #eceff4;
    --flowly-text-secondary: #b3bccb;
    --flowly-text-tertiary: #9aa5b8;
    --flowly-glow-2-rgb: 180 142 173;
}
[data-flowly-palette="papel"] {
    --flowly-bg-body: #15120e;
    --flowly-bg-sidebar: linear-gradient(180deg, rgba(23, 20, 15, 0.98) 0%, rgba(26, 22, 17, 0.96) 100%);
    --flowly-bg-overlay: rgba(35, 30, 24, 0.95);
    --flowly-bg-bottom-nav: rgba(23, 20, 15, 0.9);
    --flowly-text-primary: #efe8dc;
    --flowly-text-secondary: #a3988a;
    --flowly-text-tertiary: #8c8274;
    --flowly-glow-2-rgb: 234 179 8;
}
[data-flowly-palette="contraste"] {
    --flowly-bg-body: #000000;
    --flowly-bg-sidebar: #000000;
    --flowly-bg-overlay: rgba(14, 14, 14, 0.98);
    --flowly-bg-bottom-nav: rgba(0, 0, 0, 0.96);
    --flowly-text-primary: #ffffff;
    --flowly-text-secondary: #d4d4d4;
    --flowly-text-tertiary: #b5b5b5;
    --flowly-task-label-color: #ffffff;
    --flowly-border-muted: rgba(255, 255, 255, 0.2);
    --flowly-border-strong: rgba(255, 255, 255, 0.5);
    --flowly-glow-2-rgb: 0 0 0;
}

/* ============================================================
   TEMA CLARO — light mode opt-in via <html data-theme="light">
   Apenas superficies, texto, bordas e sombras mudam.
   Accents, charts e tags funcionam igual nos 2 temas.
   ============================================================ */
[data-theme="light"] {
    --flowly-bg-body: #FAFAF9;
    /* Brilho da cor de destaque no claro: 0 no padrão (Sutil); Suave/Vívido acendem. */
    --flowly-bg-body-gradient: radial-gradient(ellipse 60% 40% at 14% 8%, rgb(var(--flowly-accent-primary-rgb) / var(--flowly-body-accent-light)) 0%, transparent 65%);
    --flowly-bg-elevated: rgba(255, 255, 255, 0.82);
    --flowly-bg-elevated-hover: rgba(255, 255, 255, 0.94);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.92);
    --flowly-bg-glass: rgba(0, 0, 0, 0.04);
    --flowly-bg-glass-hover: rgba(0, 0, 0, 0.07);
    --flowly-bg-glass-strong: rgba(0, 0, 0, 0.10);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #F5F5F4 100%);
    --flowly-text-primary: #1C1917;
    --flowly-text-secondary: #57534E;
    --flowly-text-tertiary: #A8A29E;
    --flowly-text-muted: rgba(28, 25, 23, 0.35);
    --flowly-text-inverse: #FAFAF9;
    --flowly-border-subtle: rgba(0, 0, 0, 0.08);
    --flowly-border-muted: rgba(0, 0, 0, 0.10);
    --flowly-border-strong: rgba(0, 0, 0, 0.14);
    --flowly-border-active: rgba(0, 0, 0, 0.18);
    --flowly-panel: rgba(255, 255, 255, 0.72);
    --flowly-border: rgba(0, 0, 0, 0.08);
    --flowly-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --flowly-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --flowly-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.14);
    --flowly-shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.18);
    --flowly-shadow-glow-primary: 0 0 28px rgb(var(--flowly-accent-primary-rgb) / 0.28);
    /* "Passado" no light — preto a 38% + opacity 1.0 (já há fundo claro,
       multiplicar por opacity esmaece demais). */
    --flowly-past-day-opacity: 1;
    --flowly-past-day-text: rgba(0, 0, 0, 0.38);
    /* Em light: cinza-claro do --flowly-text-tertiary ja basta. Sem opacity. */
    --flowly-task-done-opacity: 1;
    --flowly-task-done-text: #6B7280;
    --flowly-task-label-color: var(--flowly-text-primary);
    --flowly-task-timer-color: var(--flowly-text-tertiary);
    /* Aliases --ds-* espelham as mudancas */
    color-scheme: light;
}

/* Temas no claro (vêm depois do [data-theme="light"] pra vencer). */
[data-theme="light"][data-flowly-palette="flowly"] {
    --flowly-bg-body: #FAFAF9;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #F5F5F4 100%);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.92);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-text-primary: #1C1917;
    --flowly-text-secondary: #57534E;
    --flowly-text-tertiary: #A8A29E;
}
[data-theme="light"][data-flowly-palette="oceano"] {
    --flowly-bg-body: #F3F7FB;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #EDF3F9 100%);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.94);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-text-primary: #0F1B2D;
    --flowly-text-secondary: #4A5A70;
    --flowly-text-tertiary: #94A3B8;
}
[data-theme="light"][data-flowly-palette="indigo"] {
    --flowly-bg-body: #F7F7FB;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #F1F1F8 100%);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.94);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-text-primary: #16162A;
    --flowly-text-secondary: #51516B;
    --flowly-text-tertiary: #A0A0B8;
}
[data-theme="light"][data-flowly-palette="uva"] {
    --flowly-bg-body: #FAF7FD;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #F4EFFA 100%);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.94);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-text-primary: #221630;
    --flowly-text-secondary: #5E4E70;
    --flowly-text-tertiary: #A99BB8;
}
[data-theme="light"][data-flowly-palette="rose"] {
    --flowly-bg-body: #FDF7F8;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFFFF 0%, #FAEFF2 100%);
    --flowly-bg-overlay: rgba(255, 255, 255, 0.94);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.92);
    --flowly-text-primary: #2A1520;
    --flowly-text-secondary: #6B4E5A;
    --flowly-text-tertiary: #B59AA5;
}
[data-theme="light"][data-flowly-palette="ambar"] {
    --flowly-bg-body: #FCF9F2;
    --flowly-bg-sidebar: linear-gradient(180deg, #FFFDF8 0%, #F7F1E4 100%);
    --flowly-bg-overlay: rgba(255, 253, 248, 0.95);
    --flowly-bg-bottom-nav: rgba(255, 253, 248, 0.92);
    --flowly-text-primary: #2A2114;
    --flowly-text-secondary: #6B5D48;
    --flowly-text-tertiary: #B0A38C;
}
[data-theme="light"][data-flowly-palette="nord"] {
    --flowly-bg-body: #ECEFF4;
    --flowly-bg-sidebar: linear-gradient(180deg, #F2F4F8 0%, #E5E9F0 100%);
    --flowly-bg-overlay: rgba(242, 244, 248, 0.96);
    --flowly-bg-bottom-nav: rgba(242, 244, 248, 0.92);
    --flowly-text-primary: #2E3440;
    --flowly-text-secondary: #4C566A;
    --flowly-text-tertiary: #8A94A8;
}
[data-theme="light"][data-flowly-palette="papel"] {
    --flowly-bg-body: #F5F0E6;
    --flowly-bg-sidebar: linear-gradient(180deg, #FBF8F1 0%, #F1EBDF 100%);
    --flowly-bg-overlay: rgba(251, 248, 241, 0.96);
    --flowly-bg-bottom-nav: rgba(251, 248, 241, 0.92);
    --flowly-text-primary: #2B2520;
    --flowly-text-secondary: #5F554A;
    --flowly-text-tertiary: #A89D8E;
}
[data-theme="light"][data-flowly-palette="contraste"] {
    --flowly-bg-body: #FFFFFF;
    --flowly-bg-sidebar: #FFFFFF;
    --flowly-bg-overlay: rgba(255, 255, 255, 0.99);
    --flowly-bg-bottom-nav: rgba(255, 255, 255, 0.98);
    --flowly-text-primary: #000000;
    --flowly-text-secondary: #262626;
    --flowly-text-tertiary: #525252;
    --flowly-task-label-color: #000000;
    --flowly-border-muted: rgba(0, 0, 0, 0.22);
    --flowly-border-strong: rgba(0, 0, 0, 0.55);
}

/* Transicao suave entre temas — apenas em superficies grandes */
html,
body,
.app-shell,
.app-sidebar,
.app-main,
.settings-card {
    transition:
        background-color 280ms var(--flowly-ease-out),
        color 280ms var(--flowly-ease-out),
        border-color 280ms var(--flowly-ease-out),
        box-shadow 280ms var(--flowly-ease-out);
}

/* Scrollbars se ajustam ao tema */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.32);
}