/* ============================================================================
   Vaca Magra · Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth para cores, tipografia, espaço, raio e sombras.
   Consumido pelo tailwind.config.js (extends.colors, extends.fontFamily...)
   e diretamente nos componentes via var(--token).

   Convenção:
   - --vm-{categoria}-{role}     ex: --vm-color-primary, --vm-space-4
   - --vm-color-{role}/{shade}   ex: --vm-color-ink/soft
   - Status: dupla cor (text + bg) — sempre nessa ordem.
   ========================================================================== */

   :root {
    /* ── Cor · superfícies ─────────────────────────────────────────────── */
    --vm-color-bg:           #F4EFE6;   /* fundo principal · UI body          */
    --vm-color-bg-elevated:  #EDE6D8;   /* fundos secundários · hover sutil  */
    --vm-color-paper:        #FBF7EE;   /* cartões · superfícies elevadas    */
  
    /* ── Cor · tinta (texto) ───────────────────────────────────────────── */
    --vm-color-ink:          #2A2520;   /* texto principal                    */
    --vm-color-ink-soft:     rgba(42, 37, 32, 0.72);   /* texto secundário   */
    --vm-color-ink-mute:     rgba(42, 37, 32, 0.50);   /* legendas, hints    */
    --vm-color-ink-faint:    rgba(42, 37, 32, 0.18);   /* placeholders       */
    --vm-color-line:         rgba(42, 37, 32, 0.12);   /* borders, dividers  */
  
    /* ── Cor · marca ──────────────────────────────────────────────────── */
    --vm-color-primary:      #B5523A;   /* terracota · CTAs, links, marca    */
    --vm-color-primary-deep: #8C3A2A;   /* hover · pressed                    */
    --vm-color-accent:       #D89A4E;   /* mostarda · highlights pontuais    */
  
    /* ── Cor · status (funcional) ─────────────────────────────────────── */
    --vm-color-success:      #4F6B3A;   /* verde-oliva · pago, pronto         */
    --vm-color-success-bg:   #E8EDD9;
    --vm-color-warning:      #C2843E;   /* caramelo · pendente, aguardando   */
    --vm-color-warning-bg:   #F5E8CE;
    --vm-color-danger:       #8C3A2A;   /* vinho · atrasado, alerta           */
    --vm-color-danger-bg:    #F1DBD2;
  
    /* ── Tipografia · famílias ────────────────────────────────────────── */
    --vm-font-display: 'Fraunces', 'Times New Roman', serif;
    --vm-font-ui:      'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --vm-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  
    /* ── Tipografia · escala (mobile-first, mobile = base) ────────────── */
    --vm-text-2xs:  10.5px;   /* smallcaps                                    */
    --vm-text-xs:   12px;     /* captions, hints                              */
    --vm-text-sm:   13px;     /* meta info                                    */
    --vm-text-base: 15px;     /* UI padrão                                    */
    --vm-text-md:   17px;     /* body destacado                               */
    --vm-text-lg:   20px;     /* H3                                           */
    --vm-text-xl:   24px;     /* H2                                           */
    --vm-text-2xl:  32px;     /* H1                                           */
    --vm-text-display: 48px;  /* Display · capa, dashboard                    */
  
    --vm-leading-tight:   1.05;
    --vm-leading-snug:    1.2;
    --vm-leading-normal:  1.45;
    --vm-leading-loose:   1.6;
  
    --vm-tracking-tight:  -0.03em;   /* títulos Fraunces                      */
    --vm-tracking-normal: -0.005em;
    --vm-tracking-caps:   0.14em;    /* smallcaps                             */
  
    /* Variable font axes — Fraunces */
    --vm-fraunces-opsz: 144;
    --vm-fraunces-soft: 50;
  
    /* ── Espaço (escala 4px) ──────────────────────────────────────────── */
    --vm-space-0:  0;
    --vm-space-1:  4px;
    --vm-space-2:  8px;
    --vm-space-3:  12px;
    --vm-space-4:  16px;
    --vm-space-5:  20px;
    --vm-space-6:  24px;
    --vm-space-8:  32px;
    --vm-space-10: 40px;
    --vm-space-12: 48px;
    --vm-space-16: 64px;
    --vm-space-20: 80px;
  
    /* ── Raio ─────────────────────────────────────────────────────────── */
    --vm-radius-sm:   6px;
    --vm-radius:      10px;
    --vm-radius-md:   14px;
    --vm-radius-lg:   18px;
    --vm-radius-xl:   24px;
    --vm-radius-pill: 9999px;
  
    /* ── Sombra (usar com parcimônia — UI é plana) ────────────────────── */
    --vm-shadow-sm:    0 1px 2px rgba(42, 37, 32, 0.06);
    --vm-shadow:       0 4px 14px -4px rgba(42, 37, 32, 0.08);
    --vm-shadow-lg:    0 12px 36px -10px rgba(42, 37, 32, 0.18);
    --vm-shadow-focus: 0 0 0 3px rgba(181, 82, 58, 0.30);
  
    /* ── Z-layers ─────────────────────────────────────────────────────── */
    --vm-z-base:    0;
    --vm-z-sticky:  10;
    --vm-z-overlay: 50;
    --vm-z-modal:   100;
    --vm-z-toast:   200;
  
    /* ── Motion ───────────────────────────────────────────────────────── */
    --vm-ease:          cubic-bezier(.22, .61, .36, 1);
    --vm-ease-in:       cubic-bezier(.4, 0, 1, 1);
    --vm-ease-out:      cubic-bezier(0, 0, .2, 1);
    --vm-duration-fast: 140ms;
    --vm-duration:      220ms;
    --vm-duration-slow: 380ms;
  }
  
  /* ── Modo escuro (back office em produção noturna) ─────────────────────
     Inverte superfícies e tintas; cor da marca e status permanecem.
     ──────────────────────────────────────────────────────────────────── */
  [data-theme='dark'] {
    --vm-color-bg:          #1A1612;
    --vm-color-bg-elevated: #251F1A;
    --vm-color-paper:       #2D2620;
  
    --vm-color-ink:         #F4EFE6;
    --vm-color-ink-soft:    rgba(244, 239, 230, 0.72);
    --vm-color-ink-mute:    rgba(244, 239, 230, 0.50);
    --vm-color-ink-faint:   rgba(244, 239, 230, 0.18);
    --vm-color-line:        rgba(244, 239, 230, 0.10);
  
    /* Status no escuro fica mais saturado para manter contraste */
    --vm-color-success-bg:  rgba(79, 107, 58, 0.18);
    --vm-color-warning-bg:  rgba(194, 132, 62, 0.18);
    --vm-color-danger-bg:   rgba(140, 58, 42, 0.22);
  }