/* ============================================================
   tokens.css — Moncalieri Design System v2
   Acesso Seguro — bump DS v1 → v2 (2026-06-03)
   Fonte: Design.md v2.0 + Manual Creative Studio Jan/2026
   ============================================================ */

:root {
  /* --- Cores brand primárias (Pantone-stamped) --- */
  --mc-navy:          #27295c;   /* Pantone 2756c */
  --mc-navy-l:        #353880;
  --mc-wine:          #42163c;   /* Pantone 7659c */
  --mc-wine-l:        #5a2055;

  /* --- Cores brand accent --- */
  --mc-amber:         #aa4d09;   /* bronze — Pantone 159c */
  --mc-amber-l:       #d97706;
  --mc-brand-magenta: #7f1c74;
  --mc-brand-blue:    #161e7a;
  --mc-brand-oxblood: #641918;

  /* --- Neutros warm --- */
  --mc-bg:            #f8f7f5;
  --mc-surface:       #ffffff;
  --mc-surface-2:     #f1f0ee;
  --mc-g100:          #f1f0ee;
  --mc-g200:          #e6e4e0;
  --mc-g300:          #d4d1cc;
  --mc-g400:          #a8a4a0;   /* ícones/placeholders — NÃO usar para texto */
  --mc-g600:          #5c5955;

  /* --- Texto --- */
  --mc-text-1:        #1a1918;   /* primário    — AAA 15.8:1 */
  --mc-text-2:        #5c5955;   /* secundário  — AA  6.6:1  */
  --mc-text-3:        #6f6b66;   /* terciário   — AA  4.9:1  */
  --mc-text-on-inv:   #ffffff;

  /* --- Semânticas tema --- */
  --mc-border:        #e6e4e0;
  --mc-border-str:    #d4d1cc;
  --mc-accent:        var(--mc-navy);
  --mc-focus-ring:    0 0 0 4px rgba(39, 41, 92, 0.20);

  /* --- Surface invertida (topbar navy, badges, etc.) --- */
  --mc-surface-inv:   var(--mc-navy);

  /* --- Estados --- */
  --mc-err:           #b91c1c;
  --mc-err-bg:        #fee2e2;
  --mc-err-border:    rgba(185, 28, 28, 0.25);
  --mc-ok:            #166534;
  --mc-ok-bg:         #dcfce7;
  --mc-ok-border:     rgba(22, 101, 52, 0.25);
  --mc-warn:          #aa4d09;
  --mc-warn-bg:       #fff7ed;
  --mc-warn-border:   rgba(170, 77, 9, 0.25);
  --mc-pend:          #6d28d9;
  --mc-pend-bg:       #ede9fe;
  --mc-pend-border:   rgba(109, 40, 217, 0.25);
  --mc-info:          #1d4ed8;
  --mc-info-bg:       #eff6ff;
  --mc-info-border:   rgba(29, 78, 216, 0.25);

  /* --- Formas --- */
  --mc-r:             12px;
  --mc-rsm:           8px;
  --mc-rxs:           6px;
  --mc-rmd:           12px;
  --mc-rlg:           16px;
  --mc-rpill:         999px;

  /* --- Sombras / elevação --- */
  --mc-elev-0:        none;
  --mc-elev-1:        0 1px 3px rgba(15, 17, 42, 0.06), 0 1px 2px rgba(15, 17, 42, 0.04);
  --mc-elev-2:        0 4px 24px rgba(15, 17, 42, 0.08), 0 1px 3px rgba(15, 17, 42, 0.04);
  --mc-elev-3:        0 8px 32px rgba(15, 17, 42, 0.12), 0 2px 8px rgba(15, 17, 42, 0.06);
  --mc-elev-4:        0 16px 48px rgba(15, 17, 42, 0.16), 0 4px 12px rgba(15, 17, 42, 0.08);
  --mc-elev-drawer:   -12px 0 40px rgba(0, 0, 0, 0.15);
  --mc-sh:            var(--mc-elev-2);
  --mc-sh-focus:      var(--mc-focus-ring);

  /* --- Tipografia --- */
  --mc-font-app:      "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mc-font-brand:    "Futura", "Jost", system-ui, sans-serif;
  --mc-font-docs:     "Arial", sans-serif;
  --mc-font-mono:     "Courier New", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Letter-spacing --- */
  --mc-ls-display:    -0.03em;
  --mc-ls-tight:      -0.02em;
  --mc-ls-title:      -0.01em;
  --mc-ls-normal:     0;
  --mc-ls-meta:       0.08em;
  --mc-ls-label:      0.10em;
  --mc-ls-caps:       0.12em;
  --mc-ls-eyebrow:    0.15em;
  --mc-ls-hero:       0.20em;

  /* --- Font sizes (escala minor third ~1.2×) --- */
  --mc-fs-xs:         10px;
  --mc-fs-sub:        12px;
  --mc-fs-body:       14px;
  --mc-fs-base:       16px;
  --mc-fs-md:         18px;
  --mc-fs-lg:         20px;
  --mc-fs-xl:         24px;
  --mc-fs-2xl:        28px;
  --mc-fs-3xl:        32px;

  /* --- Animação --- */
  --mc-tr:            0.15s ease;
  --mc-ease:          cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Spacing 4pt --- */
  --mc-s1:    4px;
  --mc-s2:    8px;
  --mc-s3:    12px;
  --mc-s4:    16px;
  --mc-s5:    20px;
  --mc-s6:    24px;
  --mc-s8:    32px;
  --mc-s10:   40px;
  --mc-s12:   48px;
  --mc-s16:   64px;
  --mc-gutter: 40px;
  --mc-maxw:   1200px;

  /* --- Nav (sidebar) --- */
  --mc-nav-hover:     rgba(39, 41, 92, 0.04);
  --mc-nav-active:    rgba(39, 41, 92, 0.06);
  --mc-sidebar-w:     224px;

  /* --- Layout (compat) --- */
  --card-w:           440px;
}

/* ---- Aliases de compat para código legado que ainda usa nomes v1 ----
   Remover progressivamente conforme cada componente for migrado.      */
:root {
  --navy:    var(--mc-navy);
  --navy-l:  var(--mc-navy-l);
  --wine:    var(--mc-wine);
  --wine-l:  var(--mc-wine-l);
  --amber:   var(--mc-amber);
  --bg:      var(--mc-bg);
  --off:     var(--mc-bg);
  --card:    var(--mc-surface);
  --tp:      var(--mc-text-1);
  --ts:      var(--mc-text-2);
  --g100:    var(--mc-g100);
  --g200:    var(--mc-g200);
  --g300:    var(--mc-g300);
  --g400:    var(--mc-g400);
  --g600:    var(--mc-g600);
  --err:     var(--mc-err);
  --err-bg:  var(--mc-err-bg);
  --ok:      var(--mc-ok);
  --ok-bg:   var(--mc-ok-bg);
  --r:       var(--mc-r);
  --rsm:     var(--mc-rsm);
  --rmd:     var(--mc-rmd);
  --rlg:     var(--mc-rlg);
  --sh:      var(--mc-sh);
  --sh-focus: var(--mc-sh-focus);
  --ff:      var(--mc-font-app);
  --tr:      var(--mc-tr);
}

/* ---- Reset base ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--mc-font-app);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mc-text-1);
  background: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--mc-navy); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

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

.mc-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--mc-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.1s;
}
.mc-skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--mc-navy);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: var(--mc-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}