/* LayoutCheck — Crocs Brand Kit "Wonderfully Unordinary"
   Portado do design antigo (React): wordmark tipográfico, geometria orgânica,
   verde icônico #00843D, acentos Jibbitz, furos e peças flutuantes.
   Fredoka (display) + Inter (corpo). Complementa a config do Tailwind. */

:root {
  --radius: 16px;

  --crocs-green: #00843D;        /* Verde Icônico (primária / CTA) */
  --crocs-green-dark: #006B31;
  --crocs-green-bright: #44A047; /* Verde vivo (hover/realce)      */
  --crocs-lime: #84C63F;         /* Lima da pílula do logo         */

  --ink: #16201A;
  --mist: #F4F7F2;               /* off-white levemente verde      */
  --line: #DEE7DC;
  --muted: #51624F;
  --soft: #E7F3E8;               /* secundária clara               */

  /* Tokens semânticos (trocam no tema escuro) */
  --bg: var(--mist);
  --card-bg: #FFFFFF;
  --fg: var(--ink);
  --field-bg: #FAFCF9;

  --jib-sun: #FFC83D;
  --jib-pink: #FF6FB5;
  --jib-pool: #38C6DA;
  --jib-grape: #9B7BEA;
  --jib-tangerine: #FF8A3D;

  --danger: #E5484D;
  --info: #38C6DA;

  --shadow-soft: 0 1px 2px rgba(17,17,17,.04), 0 8px 20px -10px rgba(17,17,17,.16);
  --shadow-jibbitz: 0 2px 0 rgba(17,17,17,.05), 0 12px 26px -12px rgba(0,132,61,.30);
  --perf-color: rgba(17,17,17,.06);
}

body { -webkit-tap-highlight-color: transparent; color: var(--fg); }
h1, h2, h3, h4, h5, h6 { font-family: 'Fredoka', system-ui, sans-serif; letter-spacing: -0.01em; }
::selection { background: color-mix(in oklab, var(--crocs-green-bright) 30%, transparent); }

/* ---- Wordmark "crocs" (sempre minúsculo, pesado, kerning fechado) ---- */
.wordmark {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  line-height: 1;
}

/* ---- Assinatura: o "Furo" (perfurações) ---- */
.perf-bg {
  background-image: radial-gradient(var(--perf-color) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
}
.perf-hole { border-radius: 50%; background: var(--perf-color); }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-jibbitz { box-shadow: var(--shadow-jibbitz); }

/* ---- Peça "Jibbitz": flutua, encaixa, com leve wiggle ---- */
.jibbitz {
  box-shadow: var(--shadow-jibbitz);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  will-change: transform;
}
.jibbitz:hover { transform: translateY(-3px) rotate(-2deg) scale(1.03); }
.jibbitz:active { transform: translateY(-1px) scale(.98) rotate(1deg); }

/* ---- Botões (pill, "conforto") ---- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; min-height: 48px; padding: 0 1.5rem;
  border-radius: 999px;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: .95rem;
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background-color .15s ease;
}
.btn-primary:hover, .btn-danger:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px); }

.btn-primary { background: var(--crocs-green); color: #fff; box-shadow: 0 10px 22px -12px rgba(0,132,61,.5); }
.btn-primary:hover { background: var(--crocs-green-bright); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.97); }

.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-soft); }
.btn-secondary:hover { border-color: var(--crocs-green); color: var(--crocs-green); }

.btn-ghost {
  background: transparent; color: var(--muted); min-height: auto;
  padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.btn-ghost:hover { background: var(--soft); color: var(--crocs-green); }

/* ---- Cards (peças flutuantes) ---- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.35rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* ---- Inputs ---- */
.input {
  width: 100%; min-height: 48px; padding: .65rem 1rem;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--card-bg);
  color: var(--fg); font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none; border-color: var(--crocs-green);
  box-shadow: 0 0 0 4px rgba(0,132,61,.14);
}
textarea.input { resize: vertical; }
.label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; }

/* ---- Toasts ---- */
.toast { animation: toast-in .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px);} to { opacity:1; transform: translateX(0);} }
.toast.hide { animation: toast-out .25s ease both; }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---- Botão gradiente (login) → verde sólido do print ---- */
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; border: none; border-radius: 999px;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: #fff;
  cursor: pointer; background: var(--crocs-green);
  box-shadow: 0 12px 24px -12px rgba(0,132,61,.55);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), background-color .15s ease;
}
.btn-gradient:hover { background: var(--crocs-green-bright); transform: translateY(-1px); }
.btn-gradient:active { transform: translateY(1px); }

/* ---- Campo com ícone (login) ---- */
.field { position: relative; }
.field .field-icon {
  position: absolute; left: 0; top: 0; bottom: 0; width: 52px;
  display: grid; place-items: center; color: var(--crocs-green);
  background: var(--soft); border-radius: 14px 0 0 14px; pointer-events: none;
}
.field .field-input {
  width: 100%; min-height: 54px; padding: 0 3.25rem 0 4rem;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--field-bg);
  color: var(--fg); font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field .field-input:focus {
  outline: none; background: #fff; border-color: var(--crocs-green);
  box-shadow: 0 0 0 4px rgba(0,132,61,.14);
}
.field .field-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: none; background: transparent; color: #9aa39a; cursor: pointer; border-radius: 999px;
}
.field .field-toggle:hover { color: var(--crocs-green); background: var(--soft); }

/* ---- Chips de filtro (pill) ---- */
.chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 .95rem;
  border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-weight: 600; font-size: .85rem; color: var(--muted); cursor: pointer; transition: all .15s ease;
}
.chip:hover { border-color: var(--crocs-green); color: var(--crocs-green); }
.chip-active { background: var(--crocs-green); border-color: var(--crocs-green); color: #fff; }

/* ---- Barras animadas ---- */
.bar-fill { transition: width 1s cubic-bezier(.34,1.1,.5,1); }

/* ---- Matriz de status (relatórios) ---- */
.matrix-aprovado { background: var(--crocs-green-bright); }
.matrix-pendente { background: var(--info); }
.matrix-correcao { background: var(--danger); }
.matrix-vazio    { background: #e6ede4; }

/* ---- Animações "pop" e float ---- */
@keyframes pop-in {
  0% { opacity: 0; transform: translateY(10px) scale(.96); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-pop-in { animation: pop-in .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes float-y { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
.animate-float { animation: float-y 3s ease-in-out infinite; }

/* Charms com mais ação: sobe/desce + balança + leve escala */
@keyframes charm-bob {
  0%,100% { transform: translateY(0) rotate(-7deg) scale(1); }
  50%     { transform: translateY(-20px) rotate(8deg) scale(1.08); }
}
.animate-charm { animation: charm-bob 2.6s ease-in-out infinite; will-change: transform; }

/* ---- Skeleton ---- */
.skeleton {
  position: relative; overflow: hidden; background: var(--mist); border-radius: var(--radius);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .jibbitz, .animate-pop-in, .animate-float, .skeleton::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   TEMA ESCURO (preto fosco) — do Brand Kit antigo
   ============================================================ */
.dark {
  --bg: #111111;
  --card-bg: #1A1C1A;
  --fg: #EAF2E9;
  --field-bg: #20241E;
  --ink: #EAF2E9;
  --mist: #111111;
  --line: #2A2E29;
  --muted: #9DAE9C;
  --soft: #232C22;
  --crocs-green: #44A047;        /* verde vivo "pop" no escuro */
  --crocs-green-dark: #2E7D34;
  --crocs-green-bright: #66C06E;
  --danger: #FF6166;
  --perf-color: rgba(255,255,255,.07);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -12px rgba(0,0,0,.7);
  --shadow-jibbitz: 0 2px 0 rgba(0,0,0,.5), 0 14px 30px -12px rgba(68,160,71,.4);
  color-scheme: dark;
}
.dark body { background-color: var(--bg); }

/* Overrides dos utilitários Tailwind usados nos templates */
.dark .bg-crocs-mist { background-color: var(--bg) !important; }
.dark .bg-white { background-color: var(--card-bg) !important; }
.dark .text-crocs-ink { color: var(--fg) !important; }
.dark .text-gray-500, .dark .text-gray-600, .dark .text-gray-700 { color: var(--muted) !important; }
.dark .text-gray-400 { color: #7d8a7c !important; }
.dark .text-crocs-green { color: var(--crocs-green-bright) !important; }
.dark .border-crocs-line,
.dark .border-gray-100, .dark .border-gray-200, .dark .border-t, .dark .border-b { border-color: var(--line) !important; }
.dark .bg-crocs-soft { background-color: var(--soft) !important; }
.dark .shadow-card, .dark .shadow-soft { box-shadow: var(--shadow-soft) !important; }
.dark .hover\:bg-crocs-mist:hover { background-color: #23271F !important; }
.dark .bg-gray-100 { background-color: #23271F !important; }
.dark .text-yellow-700 { color: var(--jib-sun) !important; }
.dark .text-purple-600 { color: var(--jib-grape) !important; }
.dark .bg-purple-100 { background-color: rgba(155,123,234,.16) !important; }

/* Ícone do toggle de tema */
#ic-sun { display: none; }
.dark #ic-sun { display: block; }
.dark #ic-moon { display: none; }