/* =========================================================================
   MZ Press · Design Tokens
   Fonte da verdade em CSS. Toda página consome ESTE arquivo por @import.
   Redeclarar hex fora daqui é o que faz a marca envelhecer em lugares
   diferentes — não fazer.
   v1.0.0
   ========================================================================= */

:root {
  /* ---------- PRIMITIVO · vermelho (primária) ---------- */
  --mz-vermelho-50:  #FBEBEE;
  --mz-vermelho-100: #F4CFD6;
  --mz-vermelho-300: #F08897;
  --mz-vermelho-400: #E04256;
  --mz-vermelho-500: #C8102E;
  --mz-vermelho-600: #A81D2A;
  --mz-vermelho-700: #8A1522;

  /* ---------- PRIMITIVO · neutro (secundária tinta + terciária papel) ---------- */
  --mz-neutro-0:    #FFFFFF;
  --mz-neutro-25:   #F5F3EF;
  --mz-neutro-50:   #EBE8E3;
  --mz-neutro-100:  #E2DFDA;
  --mz-neutro-200:  #C9C6C0;
  --mz-neutro-300:  #B9BABF;
  --mz-neutro-400:  #8E9096;
  --mz-neutro-500:  #64666C;
  --mz-neutro-600:  #4A4B50;
  --mz-neutro-700:  #3A3B40;
  --mz-neutro-800:  #232428;
  --mz-neutro-900:  #1A1B1E;
  --mz-neutro-1000: #101114;

  /* Apelidos da marca — os nomes que o manual usa */
  --mz-tinta:            var(--mz-neutro-1000);
  --mz-papel:            var(--mz-neutro-25);
  --mz-branco:           var(--mz-neutro-0);
  --mz-vermelho:         var(--mz-vermelho-500);
  --mz-vermelho-claro:   var(--mz-vermelho-400);
  --mz-vermelho-fundo:   var(--mz-vermelho-600);
  --mz-grafite:          var(--mz-neutro-600);
  --mz-cinza:            var(--mz-neutro-500);
  --mz-cinza-claro:      var(--mz-neutro-400);
  --mz-sobre-tinta:      var(--mz-neutro-300);
  --mz-linha:            var(--mz-neutro-100);
  --mz-tinta-superficie: var(--mz-neutro-800);
  --mz-tinta-linha:      var(--mz-neutro-700);

  /* Acento de MARCA — o diagonal do símbolo, os estratos, o fio.
     É FORMA, não texto: não muda com o tema e não responde a contraste de
     leitura. O que muda com o tema é --mz-accent, que serve a texto e controle. */
  --mz-marca-acento: var(--mz-vermelho-500);

  /* ---------- PRIMITIVO · estados ---------- */
  --mz-success-50:  #E7F2EC;  --mz-success-100: #C6E0D2;
  --mz-success-300: #5FC189;  --mz-success-600: #1E6F45;
  --mz-success-700: #175937;  --mz-success-900: #152B20;

  --mz-warning-50:  #FAF0DC;  --mz-warning-100: #EDD8AE;
  --mz-warning-300: #E6A84A;  --mz-warning-600: #A8650A;
  --mz-warning-700: #8A5300;  --mz-warning-900: #2E2415;

  --mz-error-50:  #FBEAE8;    --mz-error-100: #F3CBC6;
  --mz-error-300: #F2766B;    --mz-error-600: #B3261E;
  --mz-error-700: #8F1D17;    --mz-error-900: #2E1A18;

  --mz-info-50:  #E6F1F8;     --mz-info-100: #C2DCEC;
  --mz-info-300: #6BB6E5;     --mz-info-600: #1A6699;
  --mz-info-700: #15527A;     --mz-info-900: #152632;

  /* ---------- TIPOGRAFIA ---------- */
  --mz-font-display: "Archivo Black", Impact, sans-serif;
  --mz-font-sans:    "Archivo", system-ui, -apple-system, Arial, sans-serif;
  --mz-font-serif:   "Source Serif 4", Georgia, serif;
  --mz-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --mz-weight-regular:  400;
  --mz-weight-medium:   500;
  --mz-weight-semibold: 600;
  --mz-weight-bold:     700;

  --mz-text-xs:   0.8rem;
  --mz-text-sm:   0.875rem;
  --mz-text-base: 1rem;
  --mz-text-lg:   1.25rem;
  --mz-text-xl:   1.5625rem;
  --mz-text-2xl:  1.9531rem;
  --mz-text-3xl:  2.4414rem;
  --mz-text-4xl:  3.0518rem;
  --mz-text-5xl:  3.8147rem;

  --mz-leading-display: 1.02;
  --mz-leading-tight:   1.12;
  --mz-leading-snug:    1.3;
  --mz-leading-normal:  1.5;
  --mz-leading-relaxed: 1.62;
  --mz-leading-loose:   1.8;

  --mz-tracking-tighter: -0.02em;
  --mz-tracking-tight:   -0.01em;
  --mz-tracking-normal:  0;
  --mz-tracking-wide:    0.06em;
  --mz-tracking-wider:   0.14em;
  --mz-tracking-widest:  0.2em;
  --mz-tracking-brand:   0.28em;

  /* ---------- ESPAÇO ---------- */
  --mz-space-1: 4px;   --mz-space-2: 8px;   --mz-space-3: 16px;
  --mz-space-4: 24px;  --mz-space-5: 32px;  --mz-space-6: 48px;
  --mz-space-7: 64px;  --mz-space-8: 96px;  --mz-space-9: 128px;

  /* ---------- FORMA ---------- */
  --mz-radius: 0;
  --mz-radius-app-icon: 20%;
  --mz-border-hairline: 1px;
  --mz-border-fio: 2px;
  --mz-border-plano: 3px;

  --mz-shadow-none: none;
  --mz-shadow-subtle: 0 1px 2px rgba(16, 17, 20, 0.08);
  --mz-shadow-overlay: 0 8px 32px rgba(16, 17, 20, 0.24);

  /* ---------- MEDIDAS ---------- */
  --mz-control-sm: 36px;
  --mz-control-md: 44px;
  --mz-control-lg: 52px;
  --mz-icon-sm: 16px;  --mz-icon-md: 20px;
  --mz-icon-lg: 24px;  --mz-icon-xl: 32px;
  --mz-container-prose: 72ch;
  --mz-container-narrow: 800px;
  --mz-container: 1000px;
  --mz-container-wide: 1200px;
  --mz-grid-columns: 12;
  --mz-grid-gutter: 24px;

  /* ---------- MOVIMENTO ---------- */
  --mz-duration-instant: 80ms;
  --mz-duration-fast: 140ms;
  --mz-duration-base: 200ms;
  --mz-duration-slow: 320ms;
  --mz-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mz-ease-enter: cubic-bezier(0, 0, 0, 1);
  --mz-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

/* =========================================================================
   TEMA CLARO (padrão)
   ========================================================================= */
:root,
[data-theme="light"] {
  --mz-bg:            var(--mz-neutro-25);
  --mz-bg-alt:        var(--mz-neutro-50);
  --mz-surface:       var(--mz-neutro-0);
  --mz-surface-hover: var(--mz-neutro-50);

  --mz-text:         var(--mz-neutro-1000);
  --mz-text-body:    var(--mz-neutro-600);
  --mz-text-muted:   var(--mz-neutro-500);
  --mz-text-invert:  var(--mz-neutro-25);

  --mz-border:        var(--mz-neutro-100);
  --mz-border-strong: var(--mz-neutro-200);

  --mz-accent:        var(--mz-vermelho-500);
  --mz-accent-hover:  var(--mz-vermelho-600);
  --mz-accent-active: var(--mz-vermelho-700);
  --mz-accent-on:     var(--mz-neutro-0);
  --mz-accent-bg:     var(--mz-vermelho-50);
  --mz-accent-border: var(--mz-vermelho-100);
  --mz-focus:         var(--mz-vermelho-500);

  --mz-success:        var(--mz-success-700);
  --mz-success-solid:  var(--mz-success-600);
  --mz-success-on:     var(--mz-neutro-0);
  --mz-success-bg:     var(--mz-success-50);
  --mz-success-border: var(--mz-success-100);

  --mz-warning:        var(--mz-warning-700);
  --mz-warning-solid:  var(--mz-warning-700);
  --mz-warning-on:     var(--mz-neutro-0);
  --mz-warning-bg:     var(--mz-warning-50);
  --mz-warning-border: var(--mz-warning-100);

  --mz-error:          var(--mz-error-700);
  --mz-error-solid:    var(--mz-error-600);
  --mz-error-on:       var(--mz-neutro-0);
  --mz-error-bg:       var(--mz-error-50);
  --mz-error-border:   var(--mz-error-100);

  --mz-info:           var(--mz-info-700);
  --mz-info-solid:     var(--mz-info-600);
  --mz-info-on:        var(--mz-neutro-0);
  --mz-info-bg:        var(--mz-info-50);
  --mz-info-border:    var(--mz-info-100);

  color-scheme: light;
}

/* =========================================================================
   TEMA ESCURO
   Não é o claro invertido: o acento sobe de tom (#C8102E dá 3,21 sobre a
   tinta e reprova como texto) e as superfícies ganham borda em vez de sombra.
   ========================================================================= */
[data-theme="dark"] {
  --mz-bg:            var(--mz-neutro-1000);
  --mz-bg-alt:        var(--mz-neutro-900);
  --mz-surface:       var(--mz-neutro-800);
  --mz-surface-hover: var(--mz-neutro-700);

  --mz-text:         var(--mz-neutro-25);
  --mz-text-body:    var(--mz-neutro-300);
  --mz-text-muted:   var(--mz-neutro-400);
  --mz-text-invert:  var(--mz-neutro-1000);

  --mz-border:        var(--mz-neutro-700);
  --mz-border-strong: var(--mz-neutro-600);

  --mz-accent:        var(--mz-vermelho-300);
  --mz-accent-hover:  var(--mz-vermelho-400);
  --mz-accent-active: var(--mz-vermelho-500);
  --mz-accent-on:     var(--mz-neutro-1000);
  --mz-accent-bg:     #2B171B;
  --mz-accent-border: #4A2229;
  --mz-focus:         var(--mz-vermelho-400);

  --mz-success:        var(--mz-success-300);
  --mz-success-solid:  var(--mz-success-300);
  --mz-success-on:     var(--mz-neutro-1000);
  --mz-success-bg:     var(--mz-success-900);
  --mz-success-border: #24503A;

  --mz-warning:        var(--mz-warning-300);
  --mz-warning-solid:  var(--mz-warning-300);
  --mz-warning-on:     var(--mz-neutro-1000);
  --mz-warning-bg:     var(--mz-warning-900);
  --mz-warning-border: #4D3D1F;

  --mz-error:          var(--mz-error-300);
  --mz-error-solid:    var(--mz-error-300);
  --mz-error-on:       var(--mz-neutro-1000);
  --mz-error-bg:       var(--mz-error-900);
  --mz-error-border:   #4D2A26;

  --mz-info:           var(--mz-info-300);
  --mz-info-solid:     var(--mz-info-300);
  --mz-info-on:        var(--mz-neutro-1000);
  --mz-info-bg:        var(--mz-info-900);
  --mz-info-border:    #22405A;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mz-bg:            var(--mz-neutro-1000);
    --mz-bg-alt:        var(--mz-neutro-900);
    --mz-surface:       var(--mz-neutro-800);
    --mz-surface-hover: var(--mz-neutro-700);
    --mz-text:          var(--mz-neutro-25);
    --mz-text-body:     var(--mz-neutro-300);
    --mz-text-muted:    var(--mz-neutro-400);
    --mz-text-invert:   var(--mz-neutro-1000);
    --mz-border:        var(--mz-neutro-700);
    --mz-border-strong: var(--mz-neutro-600);
    --mz-accent:        var(--mz-vermelho-300);
    --mz-accent-hover:  var(--mz-vermelho-400);
    --mz-accent-active: var(--mz-vermelho-500);
    --mz-accent-on:     var(--mz-neutro-1000);
    --mz-accent-bg:     #2B171B;
    --mz-accent-border: #4A2229;
    --mz-focus:         var(--mz-vermelho-400);
    --mz-success:        var(--mz-success-300);
    --mz-success-solid:  var(--mz-success-300);
    --mz-success-on:     var(--mz-neutro-1000);
    --mz-success-bg:     var(--mz-success-900);
    --mz-success-border: #24503A;
    --mz-warning:        var(--mz-warning-300);
    --mz-warning-solid:  var(--mz-warning-300);
    --mz-warning-on:     var(--mz-neutro-1000);
    --mz-warning-bg:     var(--mz-warning-900);
    --mz-warning-border: #4D3D1F;
    --mz-error:          var(--mz-error-300);
    --mz-error-solid:    var(--mz-error-300);
    --mz-error-on:       var(--mz-neutro-1000);
    --mz-error-bg:       var(--mz-error-900);
    --mz-error-border:   #4D2A26;
    --mz-info:           var(--mz-info-300);
    --mz-info-solid:     var(--mz-info-300);
    --mz-info-on:        var(--mz-neutro-1000);
    --mz-info-bg:        var(--mz-info-900);
    --mz-info-border:    #22405A;
    color-scheme: dark;
  }
}

/* ---------- Base global obrigatória ---------- */
:focus-visible {
  outline: var(--mz-border-fio) solid var(--mz-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mz-duration-instant: 0ms;
    --mz-duration-fast: 0ms;
    --mz-duration-base: 0ms;
    --mz-duration-slow: 0ms;
  }
}