/* ==========================================================================
   CANTINA ELETRÔNICA — DESIGN SYSTEM
   Importe este arquivo em todas as telas (via layout Blade) para manter
   consistência visual em todo o projeto.
   ========================================================================== */

:root{
  /* --- cores --- */
  --bg: #EFF4EE;
  --bg-2: #E7EFE4;
  --ink: #16241C;
  --ink-soft: #4C5C52;

  --green: #1F6E4A;
  --green-dark: #164F35;
  --green-light: #E4F0E7;

  --navy: #1B2A3A;
  --navy-dark: #101C28;

  --red: #D6432E;
  --gold: #E8A33D;

  --card-bg: #FFFFFF;
  --border-soft: rgba(22,36,28,0.08);
  --shadow-sm: 0 6px 16px -8px rgba(22,36,28,0.18);
  --shadow-md: 0 20px 45px -20px rgba(22,36,28,0.28);
  --shadow-lg: 0 28px 55px -18px rgba(22,36,28,0.35);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --font-display: 'Baloo 2', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, .font-display{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p, span, label, input, select, textarea, button, a{
  font-family: var(--font-body);
}

/* --- eyebrow / badge --- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 7px 16px;
  border-radius: 999px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--red); display:inline-block; }

/* --- botões --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight:600;
  font-size:14px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: none;
  cursor:pointer;
  text-decoration:none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

.btn-primary{ background: var(--green); color:#fff; }
.btn-primary:hover{ background: var(--green-dark); box-shadow: var(--shadow-sm); }

.btn-dark{ background: var(--navy); color:#fff; }
.btn-dark:hover{ background: var(--navy-dark); box-shadow: var(--shadow-sm); }

.btn-outline{ background: transparent; color: var(--ink); border:1px solid var(--border-soft); }
.btn-outline:hover{ background: var(--bg-2); }

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

/* --- cards --- */
.card{
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card--hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* --- formulários --- */
.field-label{
  font-size:13px;
  font-weight:600;
  color: var(--ink-soft);
  margin-bottom:6px;
  display:block;
}
.field-input, .field-select, .field-textarea{
  width:100%;
  font-family: var(--font-body);
  font-size:14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus{
  outline:none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}

/* --- badges de status --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge-success{ background: var(--green-light); color: var(--green-dark); }
.badge-warning{ background: #FBEBD2; color: #8A5A16; }
.badge-danger{ background: #FBE1DC; color: var(--red); }
.badge-neutral{ background: var(--bg-2); color: var(--ink-soft); }

/* --- tabelas --- */
.table-base{ width:100%; border-collapse: collapse; font-size:14px; }
.table-base th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color: var(--ink-soft);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.table-base td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.table-base tr:hover td{ background: var(--bg); }

/* --- navbar / sidebar (retaguarda) --- */
.app-sidebar{
  background: var(--navy);
  color: #fff;
}
.app-sidebar .nav-item{
  color: rgba(255,255,255,0.75);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  transition: background 0.15s ease, color 0.15s ease;
}
.app-sidebar .nav-item:hover,
.app-sidebar .nav-item.is-active{
  background: rgba(255,255,255,0.08);
  color:#fff;
}