/**
 * MEMES BOVINOS — Design Tokens
 * Fase 3 · Sistema de Design Oficial
 *
 * ATENÇÃO: Não modificar valores arbitrariamente.
 * Toda alteração deve seguir o Design System aprovado.
 */

/* ═══════════════════════════════════════════════════════════
   CORES
═══════════════════════════════════════════════════════════ */
:root {

  /* Identidade Memes Bovinos — Preto / Grafite */
  --mb-charcoal-950: #0d0f0e;
  --mb-charcoal-900: #111312;
  --mb-charcoal-800: #181c1a;
  --mb-charcoal-700: #222524;

  /* Verde da Marca Memes Bovinos */
  --mb-brand-green:      #2f9a62;
  --mb-brand-green-dark: #237a4d;
  --mb-brand-green-pale: #e8f5ee;

  /* Verde Amazônico — complementar, uso pontual */
  --mb-green-950: #0b241c;
  --mb-green-900: #123d32;
  --mb-green-700: #1f6b4f;
  --mb-green-600: #19734a;
  --mb-green-500: #3a8f62;
  --mb-green-400: #5db382;
  --mb-green-100: #dff0e7;

  /* Rio Negro / Água */
  --mb-river-700: #1f5f78;
  --mb-river-500: #3f7f94;
  --mb-river-100: #ddeef4;

  /* Dourado */
  --mb-gold-700:  #a07a14;
  --mb-gold-500:  #d6a72c;
  --mb-gold-300:  #eacb71;
  --mb-gold-100:  #fdf5dc;

  /* Terra */
  --mb-earth-700: #6a3426;
  --mb-earth-600: #8a4934;
  --mb-earth-100: #f7ebe7;

  /* Areia */
  --mb-sand-200:  #e8ddc4;
  --mb-sand-100:  #f4efe4;

  /* Editorial — Caprichoso */
  --mb-caprichoso:        #0057b8;
  --mb-caprichoso-dark:   #003d82;
  --mb-caprichoso-light:  #e6eef8;

  /* Editorial — Garantido */
  --mb-garantido:         #d8212c;
  --mb-garantido-dark:    #a8161f;
  --mb-garantido-light:   #fce8e9;

  /* Breaking News (distinto do Garantido) */
  --mb-breaking:    #c0392b;
  --mb-breaking-bg: #fff3f2;

  /* Neutros */
  --mb-white:     #ffffff;
  --mb-offwhite:  #f6f7f4;
  --mb-gray-100:  #eef1ee;
  --mb-gray-200:  #e2e6e3;
  --mb-gray-300:  #d7ddd8;
  --mb-gray-400:  #b5bcb7;
  --mb-gray-500:  #737a75;
  --mb-gray-600:  #545c57;
  --mb-gray-700:  #3b413d;
  --mb-gray-800:  #252b27;
  --mb-gray-900:  #181c19;
  --mb-black:     #101412;

  /* Aliases Semânticos */
  --mb-surface:         var(--mb-white);
  --mb-surface-alt:     var(--mb-offwhite);
  --mb-surface-muted:   var(--mb-gray-100);
  --mb-surface-dark:    var(--mb-charcoal-900);
  --mb-surface-darker:  var(--mb-charcoal-950);
  --mb-border:          var(--mb-gray-300);
  --mb-border-dark:     var(--mb-gray-700);

  --mb-text-primary:    var(--mb-black);
  --mb-text-secondary:  var(--mb-gray-700);
  --mb-text-muted:      var(--mb-gray-500);
  --mb-text-inverse:    var(--mb-white);

  --mb-accent:          var(--mb-gold-500);
  --mb-accent-hover:    var(--mb-gold-600);
  --mb-accent-dark:     var(--mb-charcoal-900);

/* ═══════════════════════════════════════════════════════════
   TIPOGRAFIA
═══════════════════════════════════════════════════════════ */

  /* Famílias */
  --mb-font-headline: 'Barlow Condensed', 'Roboto Condensed', Arial Narrow, sans-serif;
  --mb-font-body:     'Inter', 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --mb-font-mono:     'Courier New', Courier, monospace;

  /* Escala — clamp(mínimo, preferencial, máximo) */
  --mb-text-hero:     clamp(1.9rem, 3.8vw, 3.4rem);   /* ~30–54px — 4.7: -15% editorial */
  --mb-text-h1:       clamp(2rem,    4vw,   3.5rem);    /* ~32–56px */
  --mb-text-h2:       clamp(1.5rem,  3vw,   2.5rem);    /* ~24–40px */
  --mb-text-h3:       clamp(1.25rem, 2.2vw, 1.875rem);  /* ~20–30px */
  --mb-text-card-lg:  clamp(1.25rem, 2.5vw, 1.875rem);  /* ~20–30px */
  --mb-text-card-md:  clamp(1.125rem,2vw,   1.5rem);    /* ~18–24px */
  --mb-text-card-sm:  clamp(1rem,    1.5vw, 1.25rem);   /* ~16–20px */
  --mb-text-body:     clamp(1rem,    1.1vw, 1.125rem);  /* ~16–18px */
  --mb-text-caption:  0.875rem;                          /* 14px     */
  --mb-text-label:    0.6875rem;                         /* 11px     */
  --mb-text-interface:0.8125rem;                         /* 13px     */

  /* Pesos */
  --mb-weight-regular:  400;
  --mb-weight-medium:   500;
  --mb-weight-semibold: 600;
  --mb-weight-bold:     700;
  --mb-weight-black:    900;

  /* Line-height */
  --mb-leading-tight:   1.1;
  --mb-leading-snug:    1.25;
  --mb-leading-normal:  1.5;
  --mb-leading-relaxed: 1.65;

  /* Letter-spacing */
  --mb-tracking-tight:   -0.02em;
  --mb-tracking-normal:   0;
  --mb-tracking-wide:     0.05em;
  --mb-tracking-wider:    0.1em;
  --mb-tracking-widest:   0.15em;

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */

  --mb-container:       1280px;
  --mb-content-width:   820px;
  --mb-sidebar-width:   320px;
  --mb-gutter:          clamp(1rem, 3vw, 2rem);
  --mb-grid-gap:        clamp(1rem, 2vw, 1.5rem);

/* ═══════════════════════════════════════════════════════════
   ESPAÇAMENTO
═══════════════════════════════════════════════════════════ */

  --mb-space-1:   4px;
  --mb-space-2:   8px;
  --mb-space-3:   12px;
  --mb-space-4:   16px;
  --mb-space-5:   24px;
  --mb-space-6:   32px;
  --mb-space-7:   48px;
  --mb-space-8:   64px;
  --mb-space-9:   80px;
  --mb-space-10:  96px;

/* ═══════════════════════════════════════════════════════════
   RAIOS DE BORDA
═══════════════════════════════════════════════════════════ */

  --mb-radius-xs:   2px;
  --mb-radius-sm:   4px;
  --mb-radius-md:   8px;
  --mb-radius-lg:   12px;
  --mb-radius-img:  6px;
  --mb-radius-full: 9999px;

/* ═══════════════════════════════════════════════════════════
   BORDAS
═══════════════════════════════════════════════════════════ */

  --mb-border-width:        1px;
  --mb-border-width-accent: 3px;
  --mb-border-width-heavy:  4px;

/* ═══════════════════════════════════════════════════════════
   SOMBRAS (mínimas — separação por espaço/linha/contraste)
═══════════════════════════════════════════════════════════ */

  --mb-shadow-none:  none;
  --mb-shadow-xs:    0 1px 2px rgba(16, 20, 18, 0.06);
  --mb-shadow-sm:    0 1px 4px rgba(16, 20, 18, 0.08);
  --mb-shadow-focus: 0 0 0 3px rgba(58, 143, 98, 0.35);

/* ═══════════════════════════════════════════════════════════
   TRANSIÇÕES
═══════════════════════════════════════════════════════════ */

  --mb-transition-fast:   150ms ease;
  --mb-transition-normal: 220ms ease;
  --mb-transition-slow:   350ms ease;

/* ═══════════════════════════════════════════════════════════
   Z-INDEX
═══════════════════════════════════════════════════════════ */

  --mb-z-base:     1;
  --mb-z-raised:   10;
  --mb-z-overlay:  100;
  --mb-z-dropdown: 200;
  --mb-z-sticky:   300;
  --mb-z-fixed:    400;
  --mb-z-modal:    500;
  --mb-z-top:      9999;

/* ═══════════════════════════════════════════════════════════
   BREAKPOINTS (referência — usar via media query)
   360 · 430 · 768 · 1024 · 1280
═══════════════════════════════════════════════════════════ */

  --mb-bp-xs: 360px;
  --mb-bp-sm: 430px;
  --mb-bp-md: 768px;
  --mb-bp-lg: 1024px;
  --mb-bp-xl: 1280px;

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */

  --mb-header-h-desktop: 80px;
  --mb-header-h-mobile:  60px;

/* ═══════════════════════════════════════════════════════════
   IMAGENS — PROPORÇÕES OFICIAIS
═══════════════════════════════════════════════════════════ */

  --mb-ratio-hero:       16 / 9;
  --mb-ratio-card:       16 / 9;
  --mb-ratio-horizontal: 4 / 3;
  --mb-ratio-square:     1 / 1;
  --mb-ratio-og:         40 / 21;

}