@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* Força tema claro sempre — bloqueia o modo escuro do sistema/Samsung Internet
   e evita o "zoom" automático de fonte do Android. */
html { color-scheme: only light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {
  color-scheme: only light;
  
  --c-primary-soft:  #FFA726;   
  --c-primary:       #FF6F00;   
  --c-primary-deep:  #E53935;   

  --c-primary-50:    #fff8f0;
  --c-primary-100:   #fcf5f0;
  --c-primary-200:   #ffe0c8;
  --c-primary-300:   #ffc191;

  --grad-app:
    linear-gradient(130deg, var(--c-primary-soft), var(--c-primary), var(--c-primary-deep));
  --grad-app-soft:
    linear-gradient(130deg, #ffa826b6, #FF6F00b6, #E53935b6);

  
  --c-text:          #1a1a1a;
  --c-text-muted:    #5b5048;
  --c-text-soft:     #8a7e74;
  --c-text-inverse:  #ffffff;

  
  --c-bg:            #ffffff;
  --c-bg-card:       #fcf5f0;
  --c-bg-elev:       #ffffff;
  --c-bg-overlay:    rgba(0, 0, 0, 0.55);

  
  --c-border:        #d6c8bb;
  --c-border-soft:   #e6d8cc;
  --c-border-strong: #b9a693;

  
  --c-success:       #1e7e34;
  --c-success-bg:    #e8f5ec;
  --c-warning:       #b8860b;
  --c-warning-bg:    #fff8e1;
  --c-danger:        #b00020;
  --c-danger-bg:     #fdecea;
  --c-info:          #1565c0;

  
  --font-app:        'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-xs:           11px;
  --fs-sm:           12px;
  --fs-md:           14px;
  --fs-lg:           16px;
  --fs-xl:           18px;
  --fs-2xl:          22px;
  --fs-3xl:          28px;

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        800;

  --lh-tight:        1.25;
  --lh-normal:       1.5;
  --lh-relaxed:      1.65;

  
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;
  --s-5:             20px;
  --s-6:             24px;
  --s-7:             32px;
  --s-8:             40px;
  --s-9:             56px;
  --s-10:            72px;

  
  --r-sm:            8px;
  --r-md:            12px;
  --r-lg:            16px;
  --r-xl:            22px;
  --r-2xl:           28px;
  --r-pill:          999px;

  
  --shadow-1:        0 2px 6px  rgba(0, 0, 0, 0.06);
  --shadow-2:        0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-3:        0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-orange:   0 4px 14px rgba(255, 111, 0, 0.35);

  
  --tap:             44px;       
  --tap-comfort:     48px;

  
  --header-radius:   50px;
  --content-max:     720px;
  --bottom-nav-h:    80px;   /* altura real da barra inferior (~78px) + folga, p/ o último card nunca ser cortado */
  --safe-top:        env(safe-area-inset-top, 0px);
  --safe-bottom:     env(safe-area-inset-bottom, 0px);

  
  --z-base:          1;
  --z-sticky:        100;
  --z-bottom-nav:    1000;
  --z-modal:         10000;
  --z-toast:         10500;
  --z-device-block:  99999;
  --z-loading:       100000;

  
  --t-quick:         90ms  ease-out;
  --t-fast:          120ms ease-out;
  --t-base:          200ms ease-out;
  --t-slow:          320ms ease-out;
  --t-spring:        320ms cubic-bezier(.34, 1.56, .64, 1);
  --t-emphasized:    380ms cubic-bezier(.2, .8, .2, 1);
  --t-decel:         260ms cubic-bezier(0, 0, .2, 1);
  --t-accel:         200ms cubic-bezier(.4, 0, 1, 1);

  --ease-out-expo:   cubic-bezier(.16, 1, .3, 1);
  --ease-out-back:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out:     cubic-bezier(.65, 0, .35, 1);
}



@keyframes app-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes app-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes app-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes app-pop {
  0%   { opacity: 0; transform: scale(.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes app-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes app-pulse {
  0%, 100% { transform: scale(1);   }
  50%      { transform: scale(1.05); }
}
@keyframes app-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes app-spin {
  to { transform: rotate(360deg); }
}
@keyframes app-check-pop {
  0%   { transform: scale(0)   rotate(45deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: scale(1)   rotate(45deg); }
}
@keyframes app-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 111, 0, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(255, 111, 0, 0); }
}


.app-anim-fade   { animation: app-fade-in   var(--t-base)        both; }
.app-anim-up     { animation: app-slide-up  var(--t-emphasized)  both; }
.app-anim-down   { animation: app-slide-down var(--t-emphasized) both; }
.app-anim-pop    { animation: app-pop       var(--t-spring)      both; }
.app-anim-shake  { animation: app-shake     400ms ease both; }
.app-anim-pulse  { animation: app-pulse     420ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .app-anim-fade, .app-anim-up, .app-anim-down,
  .app-anim-pop, .app-anim-shake, .app-anim-pulse {
    animation: none !important;
  }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


.theme-dark {
  --c-text:          #f5f0ea;
  --c-text-muted:    #b9aea5;
  --c-bg:            #1a1612;
  --c-bg-card:       #221c17;
  --c-border:        #3a2f27;
}


.ui-app * {
  box-sizing: border-box;
}
.ui-app {
  font-family: var(--font-app);
  color:       var(--c-text);
  background:  var(--c-bg);
  -webkit-tap-highlight-color: transparent;
}


.ui-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--tap);
  padding:         var(--s-3) var(--s-5);
  border:          none;
  border-radius:   var(--r-md);
  font:            var(--fw-bold) var(--fs-md) var(--font-app);
  cursor:          pointer;
  transition:      transform var(--t-fast), opacity var(--t-fast);
}
.ui-btn:active   { transform: scale(0.98); opacity: 0.9; }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ui-btn--primary {
  background: var(--grad-app);
  color:      var(--c-text-inverse);
  box-shadow: var(--shadow-orange);
}
.ui-btn--secondary {
  background: transparent;
  color:      var(--c-primary);
  border:     2px solid var(--c-primary);
}
.ui-btn--ghost {
  background: transparent;
  color:      var(--c-text-muted);
}
.ui-btn--danger {
  background: var(--c-danger);
  color:      var(--c-text-inverse);
}

.ui-card {
  background:    var(--c-bg-elev);
  border-radius: var(--r-lg);
  padding:       var(--s-5);
  box-shadow:    var(--shadow-1);
}

.ui-input {
  width:         100%;
  min-height:    var(--tap);
  padding:       var(--s-3) var(--s-4);
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font:          var(--fw-medium) var(--fs-md) var(--font-app);
  background:    var(--c-bg);
  color:         var(--c-text);
}
.ui-input:focus {
  outline:        none;
  border-color:   var(--c-primary);
  box-shadow:     0 0 0 3px rgba(255, 111, 0, 0.15);
}

.ui-toast {
  position:       fixed;
  bottom:         calc(var(--bottom-nav-h) + var(--s-4));
  left:           50%;
  transform:      translateX(-50%) translateY(20px);
  background:     #1a1a1a;
  color:          var(--c-text-inverse);
  padding:        var(--s-3) var(--s-5);
  border-radius:  var(--r-pill);
  font:           var(--fw-semibold) var(--fs-sm) var(--font-app);
  opacity:        0;
  pointer-events: none;
  transition:     all var(--t-base);
  z-index:        var(--z-toast);
}
.ui-toast.show {
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
}