/* ============================================================================
   MODERN MOOD — DESIGN TOKENS (CSS Custom Properties)
   Neo-Brutalist Emotional Interface v2.1.0
   Source of truth: design-tokens.json
   Updated: 2026-02-14
   ============================================================================ */

/* Google Fonts import — Primárias: Dela Gothic One, Space Grotesk
   Secundárias: Oswald, Manrope
   Neue Montreal: self-hosted or CDN (not on Google Fonts) — fallback to Inter */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Space+Grotesk:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     1. CORE STRUCTURE — 70% da interface
     ═══════════════════════════════════════════════════════════════════════ */
  --mm-surface-base:  #F8F3EB;   /* Fundo principal — acolhimento sofisticado */
  --mm-text-primary:  #141414;   /* Texto e contraste — autoridade editorial */
  --mm-surface-alt:   #EAEBED;   /* Fundo alternativo — respiro clean */
  --mm-surface-depth: #041E42;   /* Seções premium — profundidade intelectual */

  /* ═══════════════════════════════════════════════════════════════════════
     2. NAVIGATION & READING — 15% da interface
     ═══════════════════════════════════════════════════════════════════════ */
  --mm-nav-neutral:    #D6AC8D;  /* Base editorial / divisões */
  --mm-nav-soft-blue:  #85D6FF;  /* Informação leve */
  --mm-nav-platinum:   #EAEBED;  /* Áreas técnicas */

  /* ═══════════════════════════════════════════════════════════════════════
     3. ACTION COLORS — 8% da interface
     ═══════════════════════════════════════════════════════════════════════ */
  --mm-action-primary:   #EC7014;  /* CTA principal */
  --mm-action-attention: #FFD400;  /* Preço / destaque */
  --mm-action-success:   #E0F431;  /* Sucesso / positivo */

  /* ═══════════════════════════════════════════════════════════════════════
     4. EMOTIONAL BRAND — 5% da interface
     ═══════════════════════════════════════════════════════════════════════ */
  --mm-brand-affection: #F1B3C2;  /* Humanização — rosa blush */
  --mm-brand-statement: #FF69AE;  /* Campanhas / impacto — rosa vibrante */

  /* ═══════════════════════════════════════════════════════════════════════
     5. EXPRESSION — 2% da interface
     ═══════════════════════════════════════════════════════════════════════ */
  --mm-mood-purple: #C789FF;  /* Estética autoral */
  --mm-mood-green:  #E0F431;  /* Dopamina */
  --mm-mood-yellow: #FFD400;  /* Energia pop */

  /* ─── Legacy Brand Aliases (backwards compat) ────────────────────────── */
  --mm-orange:    var(--mm-action-primary);
  --mm-off-white: var(--mm-surface-base);
  --mm-black:     var(--mm-text-primary);
  --mm-pink:      var(--mm-brand-affection);
  --mm-lime:      var(--mm-mood-green);
  --mm-bege:      #E7DFD2;
  --mm-green:     #22C55E;

  /* ─── Semantic: Background & Surface ─────────────────────────────────── */
  --mm-bg:              var(--mm-surface-base);
  --mm-surface:         #F8F3EB;
  --mm-surface-subtle:  #F3EEE6;
  --mm-surface-strong:  #E7DFD2;
  --mm-surface-inverse: var(--mm-text-primary);

  /* ─── Semantic: Text ─────────────────────────────────────────────────── */
  --mm-text:            var(--mm-text-primary);
  --mm-text-secondary:  #4A4A4A;
  --mm-text-muted:      #7A7A7A;
  --mm-text-inverse:    #F8F3EB;
  --mm-text-on-accent:  var(--mm-text-primary);

  /* ─── Semantic: Accent & Highlight ───────────────────────────────────── */
  --mm-accent:          var(--mm-action-primary);
  --mm-accent-hover:    #D4630F;
  --mm-accent-alt:      var(--mm-brand-affection);
  --mm-highlight:       var(--mm-mood-green);

  /* ─── Semantic: Borders ──────────────────────────────────────────────── */
  --mm-border:          var(--mm-text-primary);
  --mm-border-subtle:   #D4CFC7;
  --mm-border-strong:   #2D2D2D;

  /* ─── State Colors ───────────────────────────────────────────────────── */
  --mm-state-hover:     rgba(0, 0, 0, 0.06);
  --mm-state-active:    rgba(0, 0, 0, 0.12);
  --mm-state-focus:     rgba(236, 112, 20, 0.45);
   --mm-state-focus-error: rgba(239, 68, 68, 0.2);
  --mm-state-disabled:  rgba(20, 20, 20, 0.28);
  --mm-state-selected:  rgba(236, 112, 20, 0.12);
   --mm-state-overlay-strong: rgba(20, 20, 20, 0.6);
   --mm-state-overlay-soft: rgba(20, 20, 20, 0.5);

  /* ─── Status Colors ──────────────────────────────────────────────────── */
  --mm-success:         #22C55E;
  --mm-success-bg:      #DCFCE7;
  --mm-warning:         #F59E0B;
  --mm-warning-bg:      #FEF3C7;
  --mm-error:           #EF4444;
  --mm-error-bg:        #FEE2E2;
  --mm-info:            #3B82F6;
  --mm-info-bg:         #DBEAFE;
  --mm-neutral:         var(--mm-surface-strong);

  /* ─── Domain: Finance ────────────────────────────────────────────────── */
  --mm-finance-positive: var(--mm-success);
  --mm-finance-negative: var(--mm-error);
  --mm-finance-pending:  var(--mm-warning);

  /* ─── Domain: Shipping ───────────────────────────────────────────────── */
  --mm-shipping-transit:   var(--mm-info);
  --mm-shipping-delivered: var(--mm-success);
  --mm-shipping-delayed:   var(--mm-warning);

  /* ─── Domain: Pricing ────────────────────────────────────────────────── */
  --mm-pricing-discount:  var(--mm-orange);
  --mm-pricing-low-stock: var(--mm-error);
  --mm-pricing-normal:    var(--mm-neutral);

  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHY — Font Stack Oficial
     ═══════════════════════════════════════════════════════════════════════ */

  /* Primárias (produto / site / dashboard) */
  --mm-font-display:    'Dela Gothic One', 'Impact', 'Arial Black', sans-serif;
  --mm-font-heading:    'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mm-font-body:       'Neue Montreal', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Secundárias (expressão / campanhas / criativo) */
  --mm-font-editorial:  'Oswald', 'Impact', sans-serif;
  --mm-font-poster:     'Impact', 'Arial Black', sans-serif;
  --mm-font-support:    'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Legacy aliases */
  --mm-font-sans:       var(--mm-font-body);
  --mm-font-mono:       'Space Grotesk', 'JetBrains Mono', 'Fira Code', monospace;

  /* ─── Typography: Size Scale ─────────────────────────────────────────── */
  --mm-text-micro: 0.75rem;   /* 12px — labels, micro */
  --mm-text-small: 0.875rem;  /* 14px — suporte */
  --mm-text-body:  1rem;      /* 16px — padrão */
  --mm-text-body-lg: 1.125rem;/* 18px — leitura confortável */
  --mm-text-h3:    1.375rem;  /* 22px — sub */
  --mm-text-h2:    1.75rem;   /* 28px — bloco */
  --mm-text-h1:    2.5rem;    /* 40px — seção */
  --mm-text-display: 3.5rem;  /* 56px — títulos */
  --mm-text-display-xl: 4.5rem; /* 72px — hero principal */

  /* Legacy size aliases (backward compat) */
  --mm-text-xs:  0.75rem;     /* 12px */
  --mm-text-sm:  0.875rem;    /* 14px */
  --mm-text-md:  1rem;        /* 16px */
  --mm-text-lg:  1.125rem;    /* 18px */
  --mm-text-xl:  1.25rem;     /* 20px */
  --mm-text-2xl: 1.5rem;      /* 24px */
  --mm-text-3xl: 1.875rem;    /* 30px */
  --mm-text-4xl: 2.25rem;     /* 36px */
  --mm-text-5xl: 3rem;        /* 48px */
  --mm-text-6xl: 3.75rem;     /* 60px */
  --mm-text-7xl: 4.5rem;      /* 72px */
  --mm-text-8xl: 6rem;        /* 96px */

  /* ─── Typography: Line Heights ───────────────────────────────────────── */
  --mm-lh-none:    1;
  --mm-lh-tight:   1.1;
  --mm-lh-snug:    1.25;
  --mm-lh-normal:  1.5;
  --mm-lh-relaxed: 1.625;
  --mm-lh-loose:   2;

  /* ─── Typography: Weights ────────────────────────────────────────────── */
  --mm-weight-regular:  400;
  --mm-weight-medium:   500;
  --mm-weight-semibold: 600;
  --mm-weight-bold:     700;
  --mm-weight-black:    900;

  /* ─── Typography: Letter Spacing ─────────────────────────────────────── */
  --mm-ls-tight:   -0.025em;
  --mm-ls-normal:  0;
  --mm-ls-wide:    0.025em;
  --mm-ls-wider:   0.05em;
  --mm-ls-widest:  0.1em;
  --mm-ls-display: 0.15em;

  /* ─── Spacing (4px baseline grid) ────────────────────────────────────── */
  --mm-space-0:   0;
  --mm-space-px:  1px;
  --mm-space-0-5: 0.125rem;
  --mm-space-1:   0.25rem;
  --mm-space-1-5: 0.375rem;
  --mm-space-2:   0.5rem;
  --mm-space-3:   0.75rem;
  --mm-space-4:   1rem;
  --mm-space-5:   1.25rem;
  --mm-space-6:   1.5rem;
  --mm-space-8:   2rem;
  --mm-space-10:  2.5rem;
  --mm-space-12:  3rem;
  --mm-space-16:  4rem;
  --mm-space-20:  5rem;
  --mm-space-24:  6rem;
  --mm-space-32:  8rem;
  --mm-space-40:  10rem;

  /* ─── Layout Spacing ─────────────────────────────────────────────────── */
  --mm-section-gap:  6rem;
  --mm-page-px:      1.5rem;
  --mm-page-px-lg:   4rem;

  /* ─── Border Widths ──────────────────────────────────────────────────── */
  --mm-border-none:   0;
  --mm-border-thin:   1px;
  --mm-border-medium: 2px;
  --mm-border-thick:  3px;
  --mm-border-heavy:  4px;
  --mm-border-brutal: 6px;

  /* ─── Border Radius ──────────────────────────────────────────────────── */
  --mm-radius-none: 0;
  --mm-radius-sm:   4px;
  --mm-radius-md:   8px;
  --mm-radius-lg:   16px;
  --mm-radius-xl:   24px;
  --mm-radius-full: 9999px;

  /* ─── Shadows (Neo-Brutalist — hard, no blur) ────────────────────────── */
  --mm-shadow-none:   none;
  --mm-shadow-sm:     2px 2px 0 0 var(--mm-black);
  --mm-shadow-md:     4px 4px 0 0 var(--mm-black);
  --mm-shadow-lg:     6px 6px 0 0 var(--mm-black);
  --mm-shadow-xl:     8px 8px 0 0 var(--mm-black);
  --mm-shadow-brutal: 10px 10px 0 0 var(--mm-black);
  --mm-shadow-hover:  6px 6px 0 0 var(--mm-orange);
   --mm-shadow-hover-brutal-accent: 14px 14px 0 0 var(--mm-orange);
   --mm-shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.15);
  --mm-shadow-inner:  inset 0 2px 4px rgba(0, 0, 0, 0.1);

  /* ─── Motion ─────────────────────────────────────────────────────────── */
  --mm-duration-instant: 50ms;
  --mm-duration-fast:    100ms;
  --mm-duration-base:    200ms;
  --mm-duration-slow:    300ms;
  --mm-duration-slower:  500ms;

  --mm-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --mm-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --mm-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --mm-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --mm-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --mm-ease-spring:   cubic-bezier(0.22, 1.5, 0.36, 1);

  /* ─── Z-Index ────────────────────────────────────────────────────────── */
  --mm-z-base:     0;
  --mm-z-raised:   10;
  --mm-z-dropdown: 100;
  --mm-z-sticky:   200;
  --mm-z-overlay:  300;
  --mm-z-modal:    400;
  --mm-z-toast:    500;
  --mm-z-max:      9999;

  /* ─── Container Max Widths ───────────────────────────────────────────── */
  --mm-max-w-prose:     65ch;
  --mm-max-w-content:   75rem;     /* 1200px */
  --mm-max-w-wide:      90rem;     /* 1440px */
  --mm-max-w-dashboard: 120rem;    /* 1920px */
}

/* ============================================================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================================================ */

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --mm-section-gap:     4rem;
    --mm-page-px:         1.25rem;
    --mm-page-px-lg:      1.5rem;
    --mm-text-display:    2.5rem;
    --mm-text-display-xl: 3rem;
    --mm-text-h1:         2rem;
    --mm-text-h2:         1.5rem;
    --mm-text-8xl:        4rem;
    --mm-text-7xl:        3.5rem;
    --mm-text-6xl:        3rem;
    --mm-text-5xl:        2.5rem;
  }
}

/* Mobile small (≤ 480px) */
@media (max-width: 480px) {
  :root {
    --mm-section-gap:     2.5rem;
    --mm-page-px:         1rem;
    --mm-page-px-lg:      1rem;
    --mm-text-display:    2rem;
    --mm-text-display-xl: 2.25rem;
    --mm-text-h1:         1.75rem;
    --mm-text-h2:         1.375rem;
    --mm-text-8xl:        3rem;
    --mm-text-7xl:        2.5rem;
    --mm-text-6xl:        2.25rem;
    --mm-text-5xl:        2rem;
    --mm-text-4xl:        1.75rem;
  }
}

/* ============================================================================
   DARK MODE
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mm-bg:              #0A0A0A;
    --mm-surface:         #141414;
    --mm-surface-subtle:  #1A1A1A;
    --mm-surface-strong:  #242424;
    --mm-surface-inverse: #F8F3EB;

    --mm-text:            #F4F4F4;
    --mm-text-secondary:  #B0B0B0;
    --mm-text-muted:      #6B6B6B;
    --mm-text-inverse:    #0F0F0F;
    --mm-text-on-accent:  var(--mm-black);

    --mm-border:          #F4F4F4;
    --mm-border-subtle:   #333333;
    --mm-border-strong:   #E0E0E0;

    --mm-state-hover:     rgba(248, 243, 235, 0.08);
    --mm-state-active:    rgba(248, 243, 235, 0.14);
    --mm-state-selected:  rgba(236, 112, 20, 0.18);

    --mm-shadow-sm:       2px 2px 0 0 #F4F4F4;
    --mm-shadow-md:       4px 4px 0 0 #F4F4F4;
    --mm-shadow-lg:       6px 6px 0 0 #F4F4F4;
    --mm-shadow-xl:       8px 8px 0 0 #F4F4F4;
    --mm-shadow-brutal:   10px 10px 0 0 #F4F4F4;
    --mm-shadow-hover:    6px 6px 0 0 var(--mm-orange);
  }
}

[data-theme="dark"],
:root.mm-dark {
  --mm-bg:              #0A0A0A;
  --mm-surface:         #141414;
  --mm-surface-subtle:  #1A1A1A;
  --mm-surface-strong:  #242424;
  --mm-surface-inverse: #F8F3EB;

  --mm-text:            #F4F4F4;
  --mm-text-secondary:  #B0B0B0;
  --mm-text-muted:      #6B6B6B;
  --mm-text-inverse:    #0F0F0F;
  --mm-text-on-accent:  var(--mm-black);

  --mm-border:          #F4F4F4;
  --mm-border-subtle:   #333333;
  --mm-border-strong:   #E0E0E0;

  --mm-state-hover:     rgba(248, 243, 235, 0.08);
  --mm-state-active:    rgba(248, 243, 235, 0.14);
  --mm-state-selected:  rgba(236, 112, 20, 0.18);

  --mm-shadow-sm:       2px 2px 0 0 #F4F4F4;
  --mm-shadow-md:       4px 4px 0 0 #F4F4F4;
  --mm-shadow-lg:       6px 6px 0 0 #F4F4F4;
  --mm-shadow-xl:       8px 8px 0 0 #F4F4F4;
  --mm-shadow-brutal:   10px 10px 0 0 #F4F4F4;
  --mm-shadow-hover:    6px 6px 0 0 var(--mm-orange);
}