/* ============================================================================
   TEMAS DE COR — 7 tons do arco-íris
   ----------------------------------------------------------------------------
   Sistema: todas as cores do site foram refatoradas para tokens CSS. Um único
   hue (--tp-hue, padrão 122 = verde) alimenta todos os tokens via hsl(); os
   desvios (Δ) por token preservam a estrutura de matizes da paleta original.

   O tema ativo é aplicado como atributo no <html> ANTES do carregamento das
   folhas de estilo (script inline no <head>, ver App.razor), então não há
   "flash" de tema errado:

       document.documentElement.setAttribute('data-theme', 'azul');
   ========================================================================== */

:root {
    /* padrão do site: violeta. Sem data-theme (ou sem persistência no
       navegador), tudo resolve neste hue. */
    --tp-hue: 272deg;

    /* acentos */
    --tp-accent:          hsl(var(--tp-hue) 39% 49%);              /* #4caf50 */
    --tp-accent-strong:   hsl(calc(var(--tp-hue) + 8deg) 55% 40%); /* #2e9e41 */
    --tp-accent-deep:     hsl(calc(var(--tp-hue) + 1deg) 46% 34%); /* #2e7d32 */
    --tp-accent-nav:      hsl(calc(var(--tp-hue) + 1deg) 28% 39%); /* #388e3c */
    --tp-accent-mid:      hsl(calc(var(--tp-hue) + 2deg) 32% 50%); /* #57a85c */
    --tp-accent-soft:     hsl(calc(var(--tp-hue) + 1deg) 38% 57%); /* #66bb6a */
    --tp-forest:          hsl(calc(var(--tp-hue) + 2deg) 55% 24%); /* #1b5e20 */
    --tp-emerald:         hsl(calc(var(--tp-hue) + 33deg) 74% 31%);/* #158a5a */
    --tp-lime:            hsl(calc(var(--tp-hue) - 27deg) 49% 36%);/* #558b2f */
    --tp-lime-soft:       hsl(calc(var(--tp-hue) - 34deg) 50% 60%);/* #9ccc65 */
    --tp-pine:            hsl(calc(var(--tp-hue) + 23deg) 63% 16%);/* #0f4224 */
    --tp-accent-ink:      hsl(calc(var(--tp-hue) + 30deg) 69% 19%);/* #0f5132 */

    /* discretos (bordas/textos secundários das páginas de conta) */
    --tp-muted-1: hsl(calc(var(--tp-hue) + 17deg) 12% 26%); /* #3a4a3f */
    --tp-muted-2: hsl(calc(var(--tp-hue) + 12deg)  9% 39%); /* #5a6b5e */
    --tp-muted-3: hsl(calc(var(--tp-hue) +  7deg)  8% 55%); /* #849787 */
    --tp-muted-4: hsl(calc(var(--tp-hue) + 22deg)  8% 36%); /* #54635a */

    /* fundos claros de página/cards (verde-água muito suave) */
    --tp-page-bg:    hsl(calc(var(--tp-hue) + 7deg) 33% 96%);  /* #f1f8f2 */
    --tp-page-tint:  hsl(calc(var(--tp-hue) + 8deg) 36% 94%);  /* #eaf6ec */
    --tp-card-bg:    hsl(calc(var(--tp-hue) + 9deg) 30% 91%);  /* #e0f1e4 */
    --tp-soft-tint:  hsl(calc(var(--tp-hue) + 10deg) 32% 87%); /* #d3e9d8 */
    --tp-light-g:    hsl(var(--tp-hue) 37% 84%);               /* #c8e6c9 */
    --tp-frost:      hsl(calc(var(--tp-hue) - 2deg) 27% 98%);  /* #f8fbf8 */

    /* verde-escuro do topo/menu */
    --tp-masthead:        hsl(calc(var(--tp-hue) + 18deg) 67% 14%); /* #0c3d1c */
    --tp-masthead-mid:    hsl(calc(var(--tp-hue) + 14deg) 63% 23%); /* #155e28 */
    --tp-masthead-soft:   hsl(calc(var(--tp-hue) + 17deg) 66% 17%); /* #0f4a22 */
    --tp-masthead-bright: hsl(calc(var(--tp-hue) + 15deg) 68% 22%); /* #125e28 */

    /* superfícies */
    --tp-surface:        hsl(calc(var(--tp-hue) + 19deg) 24% 11%); /* #16241b */
    --tp-surface-2:      hsl(calc(var(--tp-hue) + 21deg) 29% 9%);  /* #101d15 */
    --tp-surface-3:      hsl(calc(var(--tp-hue) + 18deg) 30% 8%);  /* #0e1a12 */
    --tp-surface-4:      hsl(calc(var(--tp-hue) + 10deg) 29% 7%);  /* #0c160e */
    --tp-surface-deep:   hsl(calc(var(--tp-hue) + 21deg) 44% 7%);  /* #0a1a10 */
    --tp-surface-deep-2: hsl(calc(var(--tp-hue) + 23deg) 50% 5%);  /* #06120b */
    --tp-grid:           hsl(calc(var(--tp-hue) + 19deg) 28% 18%); /* #223c2b */

    /* sobreposições/sombras com tom */
    --tp-overlay:        hsl(calc(var(--tp-hue) + 23deg) 50% 5%);  /* rgb(6,18,11) */
    --tp-overlay-deep:   hsl(calc(var(--tp-hue) + 22deg) 56% 3%);  /* rgb(4,14,8) */
    --tp-tint:           hsl(calc(var(--tp-hue) + 18deg) 67% 14%); /* rgb(12,61,28) */

    /* bordas */
    --tp-border-soft:    hsl(calc(var(--tp-hue) + 15deg) 32% 17%); /* #1e3a26 */
    --tp-border-strong:  hsl(calc(var(--tp-hue) + 20deg) 29% 20%); /* #24422f */

    /* textos claros */
    --tp-light-a: hsl(calc(var(--tp-hue) +   3deg) 39% 94%); /* #e8f5e9 */
    --tp-light-b: hsl(calc(var(--tp-hue) +   2deg) 37% 86%); /* #cde8cf */
    --tp-light-c: hsl(calc(var(--tp-hue) +   0deg) 37% 74%); /* #a5d6a7 */
    --tp-light-d: hsl(calc(var(--tp-hue) +   1deg) 38% 64%); /* #81c784 */
    --tp-light-e: hsl(calc(var(--tp-hue) + -13deg) 29% 88%); /* #dcead9 */
    --tp-light-f: hsl(calc(var(--tp-hue) +   6deg) 18% 68%); /* #9fbca3 */
}

/* ===== Os 7 tons do arco-íris ===== */

[data-theme="verde"]    { --tp-hue: 122deg; }
[data-theme="vermelho"] { --tp-hue:   0deg; }
[data-theme="laranja"]  { --tp-hue:  28deg; }
[data-theme="amarelo"]  { --tp-hue:  55deg; }
[data-theme="ciano"]    { --tp-hue: 185deg; }
[data-theme="azul"]     { --tp-hue: 225deg; }
/* "violeta" (272deg) = padrão, nenhuma regra necessária */

/* ===== Seletor de tema (NavMenu) =====
   O select carrega o degradê do tema ativo — como os tokens mudam com
   o [data-theme], o degradê se atualiza sozinho, sem JS para a cor. */

#theme-select {
    appearance: none;
    padding: 0.35rem 1.7rem 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background:
        linear-gradient(135deg, var(--tp-accent) 0%, var(--tp-accent-strong) 45%, var(--tp-masthead) 100%)
            no-repeat,
        #16241b;
    color: #fff;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#theme-select:hover {
    box-shadow: 0 0 0 2px var(--tp-light-c);
}

#theme-select option {
    color: #1f2937;
    background: #fff;
    text-shadow: none;
}

/* ===== Seta do .ollama-select (data-uri não aceita var(); uma por tema) ===== */

[data-theme="vermelho"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ae4e4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="laranja"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ae814e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="amarelo"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aea64e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="ciano"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234e56ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="azul"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234e96ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="violeta"] .ollama-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b4eae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}