/* =============================================================================
   v2-tokens.css — Plataforma Samsung x Publination
   Variante Samsung. Substitui a variante Nestlé/Publitech.

   O que mudou em relação ao original:
     · Paleta primária: vermelho #D01F3C  ->  azul Samsung #1428A0
     · Fundo: creme #FFF8CF  ->  neutro frio #F5F7FB
     · As 7 marcas Publitech saíram. A plataforma é single-tenant, uma marca só.
       No lugar entram as 5 CATEGORIAS do projeto (TV·REF·WM·AC·MON), que é o
       eixo pelo qual campanhas e missões se organizam neste escopo.
     · O `danger` foi deslocado para um vermelho alaranjado. Vermelho profundo
       remete à concorrência; aqui ele existe só como estado de erro, nunca
       como cor de marca.
   ============================================================================= */

:root {
    /* ── PALETTE ──────────────────────────────────────────────────────────── */
    --v2-primary:        #1428A0;   /* azul institucional Samsung */
    --v2-primary-deep:   #0B1A6E;
    --v2-primary-hover:  #1E37C4;
    --v2-primary-soft:   #EDF1FD;

    --v2-accent:         #00A3E0;   /* azul claro de apoio */
    --v2-accent-soft:    #E4F5FC;

    --v2-success:        #1F7A4C;
    --v2-success-soft:   #E7F3EC;

    --v2-warning:        #B26A00;
    --v2-warning-soft:   #FBF1E0;

    --v2-danger:         #D14343;   /* estado de erro, não cor de marca */
    --v2-danger-soft:    #FBEBEB;

    /* ── SURFACES ─────────────────────────────────────────────────────────── */
    --v2-bg:             #F5F7FB;
    --v2-surface:        #FFFFFF;
    --v2-surface-alt:    #EEF1F7;
    --v2-border:         #E2E7F0;
    --v2-border-strong:  #C9D2E2;

    /* ── TEXT ─────────────────────────────────────────────────────────────── */
    --v2-text:           #14161A;
    --v2-text-muted:     #55606F;
    --v2-text-dim:       #8A94A6;

    /* ── CATEGORIAS (substituem as marcas) ────────────────────────────────── */
    /* Usadas nos heros e tiles: .v2-campaign-hero--tv, .v2-brand-tile--tv, etc. */
    --v2-cat-tv-c1:  #1428A0;  --v2-cat-tv-c2:  #0B1A6E;  /* TV e Áudio Visual */
    --v2-cat-ref-c1: #0F7A8C;  --v2-cat-ref-c2: #07505C;  /* Refrigeração      */
    --v2-cat-wm-c1:  #3C64C8;  --v2-cat-wm-c2:  #24409A;  /* Lavanderia        */
    --v2-cat-ac-c1:  #00A3E0;  --v2-cat-ac-c2:  #0072A3;  /* Ar-condicionado   */
    --v2-cat-mon-c1: #4B4FA6;  --v2-cat-mon-c2: #2E3170;  /* Monitores         */

    /* ── RADIUS ───────────────────────────────────────────────────────────── */
    --v2-radius:        16px;
    --v2-radius-sm:     10px;
    --v2-radius-lg:     20px;
    --v2-radius-pill:   999px;

    /* ── SHADOWS ──────────────────────────────────────────────────────────── */
    --v2-shadow-sm:  0 1px 3px rgba(20, 22, 26, 0.05);
    --v2-shadow-md:  0 4px 12px rgba(20, 22, 26, 0.07);
    --v2-shadow-lg:  0 10px 24px -8px rgba(20, 22, 26, 0.16);

    /* ── FOCUS ────────────────────────────────────────────────────────────── */
    /* A fila de validação é navegada por teclado. Foco precisa ser visível. */
    --v2-focus-ring: 0 0 0 3px rgba(20, 40, 160, 0.28);

    /* ── FONT ─────────────────────────────────────────────────────────────── */
    --v2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --v2-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* ── LAYOUT ───────────────────────────────────────────────────────────── */
    --v2-sidebar-w:      280px;
    --v2-content-max:    1100px;
    --v2-content-max-wide: 1480px;  /* fila de validação e dashboard */
    --v2-mobile-pad:     16px;
}

/* =============================================================================
   RESET MÍNIMO
   ============================================================================= */
.v2-app *,
.v2-app *::before,
.v2-app *::after {
    box-sizing: border-box;
}

.v2-app {
    margin: 0;
    padding: 0;
    font-family: var(--v2-font);
    color: var(--v2-text);
    background: var(--v2-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.v2-app a {
    color: var(--v2-primary);
    text-decoration: none;
}

.v2-app button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

.v2-app input,
.v2-app select,
.v2-app textarea {
    font-family: inherit;
    color: inherit;
}

/* Foco visível e consistente em tudo que é interativo.
   Só aparece na navegação por teclado, não no clique de mouse. */
.v2-app a:focus-visible,
.v2-app button:focus-visible,
.v2-app input:focus-visible,
.v2-app select:focus-visible,
.v2-app textarea:focus-visible,
.v2-app [tabindex]:focus-visible {
    outline: 2px solid var(--v2-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Scrollbar mais discreta */
.v2-app ::-webkit-scrollbar { width: 6px; height: 6px; }
.v2-app ::-webkit-scrollbar-thumb { background: rgba(20, 22, 26, 0.2); border-radius: 10px; }

/* =============================================================================
   HEROS E TILES POR CATEGORIA
   Substituem .v2-campaign-hero--brand-N e .v2-brand-tile--brand-N
   ============================================================================= */
.v2-campaign-hero--tv  { background: linear-gradient(135deg, var(--v2-cat-tv-c1),  var(--v2-cat-tv-c2)); }
.v2-campaign-hero--ref { background: linear-gradient(135deg, var(--v2-cat-ref-c1), var(--v2-cat-ref-c2)); }
.v2-campaign-hero--wm  { background: linear-gradient(135deg, var(--v2-cat-wm-c1),  var(--v2-cat-wm-c2)); }
.v2-campaign-hero--ac  { background: linear-gradient(135deg, var(--v2-cat-ac-c1),  var(--v2-cat-ac-c2)); }
.v2-campaign-hero--mon { background: linear-gradient(135deg, var(--v2-cat-mon-c1), var(--v2-cat-mon-c2)); }

.v2-brand-tile--tv  { background: linear-gradient(135deg, var(--v2-cat-tv-c1),  var(--v2-cat-tv-c2)); }
.v2-brand-tile--ref { background: linear-gradient(135deg, var(--v2-cat-ref-c1), var(--v2-cat-ref-c2)); }
.v2-brand-tile--wm  { background: linear-gradient(135deg, var(--v2-cat-wm-c1),  var(--v2-cat-wm-c2)); }
.v2-brand-tile--ac  { background: linear-gradient(135deg, var(--v2-cat-ac-c1),  var(--v2-cat-ac-c2)); }
.v2-brand-tile--mon { background: linear-gradient(135deg, var(--v2-cat-mon-c1), var(--v2-cat-mon-c2)); }