/* ══════════════════════════════════════════════════════════
   COMMUNY-CORE.CSS — TOKENS VISUAIS COMPARTILHADOS
   ══════════════════════════════════════════════════════════

   DNA visual da Communy. Usado por qualquer área que precise
   de consistência visual sem acoplar ao layout administrativo.

   Consumido por:
   - knowledge-public.css (portal público da Central de Conhecimento)
   - comercial-base.css (área admin — carregado antes via base-comercial.html)

   Não contém regras de layout, sidebar, header admin, ou
   componentes específicos de nenhuma área.
   ══════════════════════════════════════════════════════════ */

:root {
    /* ── Accent / brand ────────────────────────────────────── */
    --app-accent: #009ec5;
    --app-accent-dark: #0086a7;
    --app-accent-secondary: #556ee6;
    --app-accent-hover: rgba(0, 158, 197, 0.08);

    /* ── Text ───────────────────────────────────────────────── */
    --app-text-primary: #3d4465;
    --app-text-muted: #5f6b7f;
    --app-text-subtle: #8b95a6;
    --app-text-on-accent: #fff;

    /* ── Borders ────────────────────────────────────────────── */
    --app-border-default: #E8E8E8;
    --app-border-soft: rgba(0, 0, 0, 0.08);
    --app-border-muted: rgba(82, 63, 105, 0.14);
    --app-border-strong: #d8dde7;

    /* ── Surfaces ───────────────────────────────────────────── */
    --app-surface-card: #fff;
    --app-surface-raised: #fff;
    --app-surface-hover: rgba(0, 158, 197, 0.08);
    --app-surface-active: rgba(0, 158, 197, 0.14);
    --app-surface-soft: #f7fafc;
    --app-bg-light: #f5f8fa;

    /* ── Border radius ──────────────────────────────────────── */
    --app-radius-sm: 0.75rem;
    --app-radius-md: 1rem;
    --app-radius-lg: 1.15rem;

    /* ── Shadow ─────────────────────────────────────────────── */
    --app-shadow-card: 0 18px 42px rgba(38, 50, 74, 0.08);
    --app-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.16);
    --app-shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.12);
    --app-overlay: rgba(0, 0, 0, 0.45);

    /* ── Typography ─────────────────────────────────────────── */
    --app-font-display: "Funnel Display", Arial, sans-serif;

    /* ── Transition ─────────────────────────────────────────── */
    --app-transition: 0.18s ease;

    /* ── Button heights ─────────────────────────────────────── */
    --app-btn-height-sm:      40px;
    --app-btn-height-compact: 42px;
    --app-btn-height-md:      48px;
    --app-btn-height:         54px;
    --app-btn-height-lg:      64px;

    /* ── Button typography & shape ──────────────────────────── */
    --app-btn-font-size:   13px;
    --app-btn-font-weight: 700;
    --app-btn-radius:      var(--app-radius-sm);

    /* ── Semantic status colors ─────────────────────────────── */
    --app-color-warning: #ffab00;
    --app-color-success: #34c38f;
    --app-color-danger: #f5365c;
    --app-color-info: #50a5f1;
    --app-color-purple: #6f42c1;
    --app-color-pink: #ff1493;

    /* ── Tone colors (icon cards, badges, categorias) ───────── */
    --app-tone-cyan:   #009ec5;
    --app-tone-coral:  #ff5d5d;
    --app-tone-slate:  #6f7787;
    --app-tone-green:  #27b77c;
    --app-tone-amber:  #ffaf1a;
    --app-tone-blue:   #2c9bd6;
    --app-tone-violet: #4F46A5;
    --app-tone-pink:   var(--app-color-pink);

    /* ── Dark theme surface reference tokens ────────────────── */
    --app-surface-card-dark: #2F363E;
    --app-surface-input-dark: #24292D;
    --app-border-input-dark: #454545;
    --app-border-subtle-dark: #636363;
}

[data-theme-version="dark"] {
    --app-accent: #17a6c5;
    --app-accent-dark: #0d94b2;
    --app-accent-hover: rgba(23, 166, 197, 0.12);

    --app-text-primary: #e8ecf1;
    --app-text-muted: #b8c4d8;
    --app-text-subtle: #94a3b8;

    --app-surface-card: var(--app-surface-card-dark);
    --app-surface-raised: rgba(255, 255, 255, 0.08);
    --app-surface-hover: rgba(255, 255, 255, 0.12);
    --app-surface-active: rgba(255, 255, 255, 0.18);
    --app-surface-soft: #1d242c;
    --app-bg-light: #171e25;

    --app-border-default: rgba(255, 255, 255, 0.1);
    --app-border-soft: rgba(255, 255, 255, 0.08);
    --app-border-muted: rgba(255, 255, 255, 0.12);
    --app-border-strong: rgba(255, 255, 255, 0.16);

    --app-accent-hover: rgba(0, 158, 197, 0.12);
    --app-shadow-card: 0 18px 42px rgba(0, 0, 0, 0.2);
    --app-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.4);
    --app-shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.4);

    --app-color-danger: #ff6e87;
}

/* ══════════════════════════════════════════════════════════
   COMPONENTES BASE — reutilizáveis em qualquer módulo
   ══════════════════════════════════════════════════════════ */

/* ── app-btn-action: botão outline accent com label + ícone ──
   Uso: header de portais públicos, ações secundárias compactas.
   Altura compacta (--app-btn-height-compact = 42px).
   ──────────────────────────────────────────────────────────── */
.app-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--app-btn-height-compact);
    padding: 0 16px;
    background: var(--app-surface-card);
    color: var(--app-accent);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-btn-radius);
    font-weight: var(--app-btn-font-weight);
    font-size: var(--app-btn-font-size);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.app-btn-action:hover,
.app-btn-action:focus-visible {
    background: var(--app-accent-hover);
    border-color: var(--app-accent);
    color: var(--app-accent);
    outline: none;
}

.app-btn-action .app-icon,
.app-btn-action .kb-icon {
    font-size: 16px;
}

/* ── app-btn-outline: outline accent, fundo branco/card ──────
   Uso: ações secundárias em qualquer módulo.
   Variantes: --danger, --success.
   align-self: flex-start garante que em flex-column o botão não
   estica para a largura total do container — comportamento padrão
   esperado para botões inline. Sobrescrever com align-self: stretch
   ou width: 100% quando precisar de botão full-width.
   ──────────────────────────────────────────────────────────── */
.app-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--app-btn-height-compact);
    padding: 0 16px;
    background: var(--app-surface-card);
    color: var(--app-accent);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-btn-radius);
    font-weight: var(--app-btn-font-weight);
    font-size: var(--app-btn-font-size);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-start;
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.app-btn-outline:hover,
.app-btn-outline:focus-visible {
    border-color: var(--app-accent);
    color: var(--app-accent);
    background: var(--app-accent-hover);
    outline: none;
}

.app-btn-outline .app-icon,
.app-btn-outline .kb-icon {
    font-size: 16px;
}

[data-theme-version="dark"] .app-btn-action,
[data-theme-version="dark"] .app-btn-outline {
    border-color: var(--app-border-strong);
    background: var(--app-surface-card);
    color: var(--app-accent);
}

[data-theme-version="dark"] .app-btn-action:hover,
[data-theme-version="dark"] .app-btn-action:focus-visible,
[data-theme-version="dark"] .app-btn-outline:hover,
[data-theme-version="dark"] .app-btn-outline:focus-visible {
    border-color: var(--app-accent);
    background: var(--app-accent-hover);
    color: var(--app-accent);
}

.app-btn-outline--danger {
    border-color: var(--app-color-danger);
    color: var(--app-color-danger);
    background: var(--app-surface-card);
}

.app-btn-outline--danger:hover,
.app-btn-outline--danger:focus-visible {
    background: rgb(from var(--app-color-danger) r g b / 0.08);
    border-color: var(--app-color-danger);
    color: var(--app-color-danger);
    outline: none;
}

.app-btn-outline--success {
    border-color: var(--app-color-success);
    color: var(--app-color-success);
    background: var(--app-surface-card);
}

.app-btn-outline--success:hover,
.app-btn-outline--success:focus-visible {
    background: rgb(from var(--app-color-success) r g b / 0.08);
    border-color: var(--app-color-success);
    color: var(--app-color-success);
    outline: none;
}

.app-btn-action.app-btn-action-primary {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.app-btn-action.app-btn-action-primary:hover,
.app-btn-action.app-btn-action-primary:focus-visible {
    background: var(--app-accent-dark);
    border-color: var(--app-accent-dark);
    color: #fff;
}

/* ── app-btn-cta: botão branco sobre fundo colorido ─────────
   Uso: cards de destaque, banners, seções com bg accent/dark.
   Não depende de tema — fundo sempre branco, texto sempre escuro.
   ──────────────────────────────────────────────────────────── */
.app-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 38px;
    background: #fff;
    color: #1a2332;
    font-weight: var(--app-btn-font-weight);
    font-size: var(--app-btn-font-size);
    border: none;
    border-radius: var(--app-btn-radius);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--app-transition);
}

.app-btn-cta:hover,
.app-btn-cta:focus-visible {
    opacity: 0.88;
    color: #1a2332;
    outline: none;
}

.app-btn-cta .app-icon,
.app-btn-cta .kb-icon {
    font-size: 16px;
}

/* ── app-skip-link: acessibilidade — "pular para conteúdo" ──── */
.app-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--app-radius-sm);
    background: var(--app-text-primary);
    color: #fff;
    transform: translateY(-160%);
}

.app-skip-link:focus {
    transform: translateY(0);
}

/* ── app-icon-button ─────────────────────────────────────────
   Compacto (42px) por padrão — icon-only.
   Modifier --lg (54px) para contextos admin/toolbar.
   ──────────────────────────────────────────────────────────── */
.app-icon-button {
    width: var(--app-btn-height-compact);
    height: var(--app-btn-height-compact);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-card);
    color: var(--app-accent);
    text-decoration: none;
    transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

.app-icon-button:hover,
.app-icon-button:focus-visible {
    color: var(--app-accent);
    border-color: var(--app-accent);
    background: var(--app-accent-hover);
    outline: none;
}

.app-icon-button i,
.app-icon-button .app-icon.inline {
    font-size: 22px;
    line-height: 1;
}

.app-icon-button .app-icon.inline {
    font-size: 28px;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* ── Modifier: admin/toolbar (54px) ── */
.app-icon-button--lg {
    width: var(--app-btn-height);
    height: var(--app-btn-height);
    border-radius: var(--app-radius-lg);
}

/* ── Modifiers de tamanho (utilitários) ── */
.app-icon-button.app-icon-only { padding: 0; }

.app-icon-button.app-icon-sm {
    height: var(--app-btn-height-sm);
    width: var(--app-btn-height-sm);
}

.app-icon-button.app-icon-md {
    height: var(--app-btn-height-md);
    width: var(--app-btn-height-md);
}

.app-icon-button.app-icon-lg {
    height: var(--app-btn-height-lg);
    width: var(--app-btn-height-lg);
}

/* ── Dark mode ── */
[data-theme-version="dark"] .app-icon-button {
    border-color: var(--app-border-strong);
    background: var(--app-surface-card);
    color: var(--app-accent);
}

[data-theme-version="dark"] .app-icon-button:hover,
[data-theme-version="dark"] .app-icon-button:focus-visible {
    border-color: var(--app-accent);
    background: var(--app-accent-hover);
}

/* ── app-tone-*: ícone-badge com cor semântica ──────────────── */
.app-tone-cyan   { color: var(--app-tone-cyan);   background: rgba(0, 158, 197, 0.16); }
.app-tone-coral  { color: var(--app-tone-coral);  background: rgba(255, 93, 93, 0.14); }
.app-tone-slate  { color: var(--app-tone-slate);  background: rgba(111, 119, 135, 0.14); }
.app-tone-green  { color: var(--app-tone-green);  background: rgba(39, 183, 124, 0.14); }
.app-tone-amber  { color: var(--app-tone-amber);  background: rgba(255, 175, 26, 0.18); }
.app-tone-blue   { color: var(--app-tone-blue);   background: rgba(44, 155, 214, 0.14); }
.app-tone-violet { color: var(--app-tone-violet); background: rgba(79, 70, 165, 0.14); }
.app-tone-pink   { color: var(--app-tone-pink);   background: rgb(from var(--app-tone-pink) r g b / 0.12); }

.app-tone-cyan-text   { color: var(--app-tone-cyan); }
.app-tone-coral-text  { color: var(--app-tone-coral); }
.app-tone-slate-text  { color: var(--app-tone-slate); }
.app-tone-green-text  { color: var(--app-tone-green); }
.app-tone-amber-text  { color: var(--app-tone-amber); }
.app-tone-blue-text   { color: var(--app-tone-blue); }
.app-tone-violet-text { color: var(--app-tone-violet); }
.app-tone-pink-text   { color: var(--app-tone-pink); }

/* ── Icon base: Material Symbols Rounded ────────────────────── */
.app-icon,
.kb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Material Symbols Rounded";
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    font-style: normal;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    user-select: none;
}