/*
 * base.css — Fundação do sistema (Design System MI7 v2.0)
 * --------------------------------------------------------------------------
 * Reset & base tipográfica + scrollbar + variáveis/tokens + utilitários.
 * Inclui os tokens do design system (antes em colors.css) — fundação e
 * variáveis em arquivo único, como o style.css de referência.
 * Espelha as camadas "01. Reset & Base", "02. Variáveis" e "13. Utilitários"
 * do design system, adaptado ao layout do eCampanha (body com scroll + navbar
 * fixa). Carregado antes dos demais CSS.
 * Reset conservador: NÃO redefine list-style/button globalmente para não
 * conflitar com MDB/Bootstrap.
 */

/* Roboto: usada como opção de fonte nos criadores de tablóide/criativos. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    scrollbar-width: auto;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body {
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: var(--font-base);
    font-weight: 500;
    line-height: 1.6;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
}

a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--color-bg-surface);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: var(--radius-md);
    border: 3px solid var(--color-bg-surface);
}

/* ==========================================================================
   VARIÁVEIS / TOKENS — TEMA LIGHT (Design System MI7)
   ========================================================================== */
:root {
  /* Fundos */
  --color-bg-base:        #EEF1F8;
  --color-bg-surface:     #FFFFFF;
  --color-bg-surface-alt: #E4E8F4;
  --color-bg-sidebar:     #FFFFFF;
  --color-bg-header:      #FFFFFF;
  --color-bg-input:       #FFFFFF;
  --color-bg-hover:       rgba(81,163,200,.07);

  /* Textos */
  --color-text-primary:        #151828;
  --color-text-secondary:      #48527A;
  --color-text-muted:          #8A95B8;
  --color-text-inverse:        #FFFFFF;
  --color-text-sidebar:        #2E3B5A;
  --color-text-sidebar-active: #151828;

  /* Brand — cores institucionais GrupoMI7 */
  --color-accent:       #51A3C8;
  --color-accent-light: #E3F3FA;
  --color-accent-dark:  #3A85A8;
  --color-accent-rgb:   81,163,200;
  --color-brand-green:  #C0D52A;
  --color-brand-green-rgb: 192,213,42;
  --color-brand-navy:   #151828;

  /* Semânticas */
  --color-success:        #22C55E; --color-success-light: #DCFCE7;
  --color-warning:        #F59E0B; --color-warning-light: #FEF3C7;
  --color-danger:         #EF4444; --color-danger-light:  #FEE2E2;
  --color-info:           #3B82F6; --color-info-light:    #DBEAFE;

  /* Bordas */
  --color-border:       #D8DFF0;
  --color-border-focus: var(--color-accent);

  /* Sombras */
  --shadow-xs:    0 1px 2px rgba(21,24,40,.06);
  --shadow-sm:    0 1px 4px rgba(21,24,40,.08),0 1px 2px rgba(21,24,40,.04);
  --shadow-md:    0 4px 16px rgba(21,24,40,.10),0 2px 4px rgba(21,24,40,.06);
  --shadow-lg:    0 8px 32px rgba(21,24,40,.12),0 4px 8px rgba(21,24,40,.06);
  --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb),.22);

  /* Dimensões */
  --sidebar-expanded:  240px;
  --sidebar-collapsed:  64px;
  --header-height:      60px;
  --footer-height:      44px;

  /* Radii */
  --radius-xs:  4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  /* Tipografia */
  --font-xs:   .75rem;  --font-sm:  .8125rem;
  --font-base: .875rem; --font-md:  1rem;
  --font-lg:   1.125rem;--font-xl:  1.25rem;

  /* Transições */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 350ms cubic-bezier(.4,0,.2,1);

  /* Z-Index */
  --z-sidebar: 100; --z-header: 200;
  --z-overlay: 290; --z-drawer: 300; --z-modal: 350; --z-tooltip: 400;
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
.u-text-muted   { color: var(--color-text-muted); }
.u-text-sm      { font-size: var(--font-sm); }
.u-font-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.u-flex         { display: flex; }
.u-flex-1       { flex: 1; }
.u-items-center { align-items: center; }
.u-gap-8        { gap: 8px; }
.u-gap-12       { gap: 12px; }
.u-mt-8         { margin-top: 8px; }
.u-mt-16        { margin-top: 16px; }
.u-mb-16        { margin-bottom: 16px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}