@import url("./core-components.css");

/*
=====================================================================
MO DESIGN SYSTEM — Foundation UI
Release 2.1 · Sprint 2.1A
Arquivo base de tokens visuais, utilitários e componentes mínimos.
Compatível com as variáveis já usadas na Release 2.0.
=====================================================================
*/

:root{
  /* -------------------------------------------------------------
     Brand Colors
  ------------------------------------------------------------- */
  --mo-primary:#d51f08;
  --mo-primary-50:#fff1ef;
  --mo-primary-100:#ffe1dc;
  --mo-primary-200:#ffc7be;
  --mo-primary-300:#ff9f91;
  --mo-primary-400:#fb6b57;
  --mo-primary-500:#d51f08;
  --mo-primary-600:#b91c1c;
  --mo-primary-700:#991b1b;
  --mo-primary-800:#7f1d1d;
  --mo-primary-900:#5f1717;

  --mo-success:#16a34a;
  --mo-success-dark:#15803d;
  --mo-warning:#f59e0b;
  --mo-danger:#dc2626;
  --mo-info:#2563eb;

  /* -------------------------------------------------------------
     Neutral Colors
  ------------------------------------------------------------- */
  --mo-white:#ffffff;
  --mo-black:#020617;
  --mo-gray-25:#fcfcfd;
  --mo-gray-50:#f8fafc;
  --mo-gray-100:#f1f5f9;
  --mo-gray-200:#e2e8f0;
  --mo-gray-300:#cbd5e1;
  --mo-gray-400:#94a3b8;
  --mo-gray-500:#64748b;
  --mo-gray-600:#475569;
  --mo-gray-700:#334155;
  --mo-gray-800:#1e293b;
  --mo-gray-900:#0f172a;
  --mo-gray-950:#020617;

  /* -------------------------------------------------------------
     Semantic Aliases — usados pelas telas atuais
  ------------------------------------------------------------- */
  --mo-red:var(--mo-primary-500);
  --mo-red-dark:var(--mo-primary-600);
  --mo-dark:var(--mo-gray-900);
  --mo-dark-soft:var(--mo-gray-800);
  --mo-text:var(--mo-gray-700);
  --mo-heading:var(--mo-gray-950);
  --mo-muted:var(--mo-gray-500);
  --mo-bg:var(--mo-gray-50);
  --mo-surface:var(--mo-white);
  --mo-surface-soft:var(--mo-gray-25);
  --mo-border:var(--mo-gray-200);
  --mo-border-strong:var(--mo-gray-300);

  /* -------------------------------------------------------------
     Typography
  ------------------------------------------------------------- */
  --mo-font:Arial, Helvetica, sans-serif;
  --mo-font-display:Arial, Helvetica, sans-serif;

  --mo-text-xs:12px;
  --mo-text-sm:14px;
  --mo-text-md:16px;
  --mo-text-lg:18px;
  --mo-text-xl:20px;
  --mo-text-2xl:24px;
  --mo-text-3xl:30px;
  --mo-text-4xl:36px;
  --mo-text-5xl:48px;
  --mo-text-6xl:56px;

  --mo-leading-tight:1.12;
  --mo-leading-snug:1.25;
  --mo-leading-normal:1.5;
  --mo-leading-relaxed:1.7;

  --mo-weight-regular:400;
  --mo-weight-medium:500;
  --mo-weight-semibold:700;
  --mo-weight-bold:800;
  --mo-weight-black:900;

  /* Aliases legados */
  --mo-hero-title:var(--mo-text-6xl);
  --mo-section-title:var(--mo-text-4xl);
  --mo-subtitle:var(--mo-text-lg);
  --mo-text-size:var(--mo-text-md);
  --mo-small:var(--mo-text-sm);
  --mo-label:var(--mo-text-xs);

  /* -------------------------------------------------------------
     Spacing Scale
  ------------------------------------------------------------- */
  --mo-space-0:0;
  --mo-space-1:4px;
  --mo-space-2:8px;
  --mo-space-3:12px;
  --mo-space-4:16px;
  --mo-space-5:20px;
  --mo-space-6:24px;
  --mo-space-7:28px;
  --mo-space-8:32px;
  --mo-space-10:40px;
  --mo-space-12:48px;
  --mo-space-14:56px;
  --mo-space-16:64px;
  --mo-space-18:72px;
  --mo-space-20:80px;

  /* Aliases legados */
  --mo-container:1180px;
  --mo-container-wide:1320px;
  --mo-container-narrow:980px;
  --mo-section-padding:var(--mo-space-18);
  --mo-gap:var(--mo-space-6);

  /* -------------------------------------------------------------
     Radius
  ------------------------------------------------------------- */
  --mo-radius-xs:6px;
  --mo-radius-sm:8px;
  --mo-radius-md:12px;
  --mo-radius-lg:18px;
  --mo-radius-xl:24px;
  --mo-radius-2xl:32px;
  --mo-radius-pill:999px;

  /* -------------------------------------------------------------
     Shadows
  ------------------------------------------------------------- */
  --mo-shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --mo-shadow-sm:0 8px 22px rgba(15,23,42,.07);
  --mo-shadow-md:0 14px 34px rgba(15,23,42,.11);
  --mo-shadow-lg:0 24px 60px rgba(15,23,42,.18);
  --mo-shadow-xl:0 34px 90px rgba(15,23,42,.22);
  --mo-shadow-primary:0 14px 28px rgba(213,31,8,.24);

  /* -------------------------------------------------------------
     Motion
  ------------------------------------------------------------- */
  --mo-transition-fast:140ms ease;
  --mo-transition:220ms ease;
  --mo-transition-slow:360ms ease;

  /* -------------------------------------------------------------
     Layout
  ------------------------------------------------------------- */
  --mo-header-height:76px;
  --mo-z-header:20;
  --mo-z-dropdown:40;
  --mo-z-modal:100;
}

/* =====================================================================
   Base Reset
===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--mo-font);
  color:var(--mo-text);
  background:var(--mo-bg);
  font-size:var(--mo-text-md);
  line-height:var(--mo-leading-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;}
a{color:inherit;}
button,input,select,textarea{font:inherit;}

/* =====================================================================
   Accessibility
===================================================================== */
:focus-visible{
  outline:3px solid rgba(213,31,8,.25);
  outline-offset:3px;
}
.mo-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* =====================================================================
   Containers and Layout Utilities
===================================================================== */
.mo-container{
  width:min(var(--mo-container), calc(100% - 32px));
  margin-inline:auto;
}
.mo-container-wide{
  width:min(var(--mo-container-wide), calc(100% - 32px));
  margin-inline:auto;
}
.mo-container-narrow{
  width:min(var(--mo-container-narrow), calc(100% - 32px));
  margin-inline:auto;
}
.mo-section{padding-block:var(--mo-section-padding);}
.mo-section-sm{padding-block:var(--mo-space-12);}
.mo-section-lg{padding-block:var(--mo-space-20);}

.mo-grid{display:grid;gap:var(--mo-gap);}
.mo-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mo-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mo-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* =====================================================================
   Typography Helpers
===================================================================== */
.mo-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--mo-space-2);
  font-size:var(--mo-text-xs);
  line-height:1;
  font-weight:var(--mo-weight-black);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mo-primary-600);
}
.mo-title-xl,
.mo-title-lg,
.mo-title-md,
.mo-title-sm{
  margin:0;
  color:var(--mo-heading);
  font-family:var(--mo-font-display);
  font-weight:var(--mo-weight-black);
  letter-spacing:-.04em;
}
.mo-title-xl{font-size:clamp(38px,5vw,var(--mo-text-6xl));line-height:var(--mo-leading-tight);}
.mo-title-lg{font-size:clamp(30px,3.5vw,var(--mo-text-5xl));line-height:var(--mo-leading-tight);}
.mo-title-md{font-size:clamp(24px,2.4vw,var(--mo-text-3xl));line-height:var(--mo-leading-snug);}
.mo-title-sm{font-size:var(--mo-text-xl);line-height:var(--mo-leading-snug);letter-spacing:-.02em;}
.mo-lead{font-size:var(--mo-text-lg);line-height:var(--mo-leading-relaxed);color:var(--mo-muted);}
.mo-muted{color:var(--mo-muted);}

/* =====================================================================
   Core Components — Foundation
===================================================================== */
.mo-card{
  background:var(--mo-surface);
  border:1px solid var(--mo-border);
  border-radius:var(--mo-radius-lg);
  box-shadow:var(--mo-shadow-sm);
}
.mo-card-elevated{
  background:var(--mo-surface);
  border:1px solid rgba(226,232,240,.9);
  border-radius:var(--mo-radius-xl);
  box-shadow:var(--mo-shadow-md);
}
.mo-card-hover{
  transition:transform var(--mo-transition), box-shadow var(--mo-transition), border-color var(--mo-transition);
}
.mo-card-hover:hover{
  transform:translateY(-3px);
  box-shadow:var(--mo-shadow-lg);
  border-color:rgba(213,31,8,.18);
}

.mo-btn-primary,
.mo-btn-secondary,
.mo-btn-outline,
.mo-btn-ghost,
.mo-btn-success{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--mo-space-2);
  min-height:46px;
  padding:0 var(--mo-space-5);
  border-radius:var(--mo-radius-md);
  border:1px solid transparent;
  text-decoration:none;
  font-size:var(--mo-text-sm);
  font-weight:var(--mo-weight-black);
  line-height:1;
  cursor:pointer;
  transition:transform var(--mo-transition-fast), box-shadow var(--mo-transition-fast), background var(--mo-transition-fast), border-color var(--mo-transition-fast), color var(--mo-transition-fast);
}
.mo-btn-primary{
  background:linear-gradient(135deg,var(--mo-primary-500),var(--mo-primary-700));
  color:#fff;
  box-shadow:var(--mo-shadow-primary);
}
.mo-btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(213,31,8,.30);}
.mo-btn-secondary{background:var(--mo-dark);color:#fff;}
.mo-btn-secondary:hover{background:var(--mo-black);transform:translateY(-1px);}
.mo-btn-success{background:linear-gradient(135deg,var(--mo-success),var(--mo-success-dark));color:#fff;box-shadow:0 14px 28px rgba(22,163,74,.22);}
.mo-btn-outline{background:#fff;color:var(--mo-dark);border-color:var(--mo-border);box-shadow:var(--mo-shadow-xs);}
.mo-btn-outline:hover{border-color:var(--mo-primary-200);color:var(--mo-primary-700);box-shadow:var(--mo-shadow-sm);}
.mo-btn-ghost{background:transparent;color:var(--mo-dark);}
.mo-btn-ghost:hover{background:var(--mo-gray-100);}
.mo-btn-block{width:100%;}
.mo-btn-sm{min-height:38px;padding-inline:var(--mo-space-4);font-size:var(--mo-text-xs);border-radius:var(--mo-radius-sm);}
.mo-btn-lg{min-height:54px;padding-inline:var(--mo-space-6);font-size:var(--mo-text-md);}

.mo-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--mo-space-1);
  min-height:26px;
  padding:0 var(--mo-space-3);
  border-radius:var(--mo-radius-pill);
  background:var(--mo-gray-100);
  color:var(--mo-gray-700);
  border:1px solid var(--mo-border);
  font-size:var(--mo-text-xs);
  font-weight:var(--mo-weight-black);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.mo-badge-primary{background:var(--mo-primary-50);color:var(--mo-primary-700);border-color:var(--mo-primary-200);}
.mo-badge-success{background:#ecfdf5;color:#166534;border-color:#bbf7d0;}
.mo-badge-dark{background:var(--mo-gray-900);color:#fff;border-color:var(--mo-gray-900);}

.mo-input,
.mo-select,
.mo-textarea{
  width:100%;
  min-height:46px;
  border:1px solid var(--mo-border);
  border-radius:var(--mo-radius-md);
  padding:0 var(--mo-space-4);
  background:#fff;
  color:var(--mo-dark);
  font-family:var(--mo-font);
  transition:border-color var(--mo-transition-fast), box-shadow var(--mo-transition-fast), background var(--mo-transition-fast);
}
.mo-textarea{min-height:110px;padding-block:var(--mo-space-3);resize:vertical;line-height:var(--mo-leading-normal);}
.mo-input:focus,
.mo-select:focus,
.mo-textarea:focus{
  outline:none;
  border-color:rgba(213,31,8,.55);
  box-shadow:0 0 0 4px rgba(213,31,8,.10);
}

.mo-divider{height:1px;background:var(--mo-border);border:0;margin:var(--mo-space-6) 0;}
.mo-soft-bg{background:linear-gradient(180deg,#fff 0%,var(--mo-gray-50) 100%);}

/* =====================================================================
   Responsive Rules
===================================================================== */
@media (max-width:1024px){
  :root{--mo-section-padding:var(--mo-space-14);}
  .mo-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mo-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  :root{--mo-section-padding:var(--mo-space-12);}
  .mo-container,.mo-container-wide,.mo-container-narrow{width:min(100% - 24px, var(--mo-container));}
  .mo-grid-2,.mo-grid-3,.mo-grid-4{grid-template-columns:1fr;}
  .mo-btn-primary,.mo-btn-secondary,.mo-btn-outline,.mo-btn-ghost,.mo-btn-success{min-height:48px;}
}

/* =========================================================
   Hotfix 2.2.1C.3 — Footer & Navigation Consistency
   Centralized category navigation styles
   ========================================================= */
.mo-menu-item-has-children{position:relative;}
.mo-menu-dropdown-categories{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  width:min(560px,calc(100vw - 32px));
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:18px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:24px;
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 70px rgba(15,23,42,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;
  backdrop-filter:blur(18px);
}
.mo-menu-dropdown-categories:before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:16px;
  height:16px;
  transform:translateX(-50%) rotate(45deg);
  background:#fff;
  border-left:1px solid rgba(226,232,240,.95);
  border-top:1px solid rgba(226,232,240,.95);
}
.mo-menu-item-has-children:hover>.mo-menu-dropdown-categories,
.mo-menu-item-has-children:focus-within>.mo-menu-dropdown-categories{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mo-menu .mo-menu-dropdown-categories a.mo-category-nav-item{
  min-height:52px;
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  color:#111827!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.mo-menu .mo-menu-dropdown-categories a.mo-category-nav-item:hover{
  background:#fff7f6;
  border-color:#fee2e2;
  color:#dc1b12!important;
  transform:translateY(-1px);
}
.mo-menu .mo-menu-dropdown-categories a.mo-category-tone-green:hover{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#16a34a!important;
}
.mo-menu-dropdown-categories img{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px;
  object-fit:contain;
}
.mo-footer-category-link{
  display:flex!important;
  align-items:center;
  gap:9px;
  width:max-content;
}
.mo-footer-category-link img{
  width:16px;
  height:16px;
  flex:0 0 16px;
  object-fit:contain;
  filter:none;
}
.mo-footer-category-link:hover span,
.mo-footer-category-link:hover{color:#fff!important;}
.mo-footer-category-all{font-weight:800;color:#fff!important;margin-bottom:2px;}
.mo-footer-col .mo-footer-category-link span{line-height:1.25;}
@media(max-width:980px){
  .mo-menu-dropdown-categories{
    position:static;
    width:100%;
    transform:none!important;
    grid-template-columns:1fr;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;
    margin:8px 0 12px;
    padding:12px;
    box-shadow:none;
    border-radius:16px;
  }
  .mo-menu.is-open .mo-menu-dropdown-categories{display:grid;}
  .mo-menu-dropdown-categories:before{display:none;}
}