/* Nutrition Famille AI — base styles & components
   (Plain CSS: the Tailwind Play CDN does not compile @apply from external
   files, so reusable component classes are written by hand here.) */

:root { color-scheme: light; }
.dark { color-scheme: dark; }

* { -webkit-tap-highlight-color: transparent; }
body { text-rendering: optimizeLegibility; }

::selection { background: rgba(63,125,79,.22); }

/* Font-weight helpers used in markup */
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

/* Subtle paper grain for depth */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.dark .grain { opacity: .06; mix-blend-mode: screen; }

/* Cards */
.card {
  position: relative; z-index: 1;
  background: #fff;
  border: 1px solid rgba(28,33,27,.07);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgba(28,33,27,.05), 0 12px 28px -14px rgba(28,33,27,.16);
}
.dark .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); box-shadow: none; }

.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(28,33,27,.05), 0 18px 36px -16px rgba(28,33,27,.28); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .9rem; padding: .62rem 1.05rem; font-weight: 600; font-size: .875rem;
  line-height: 1; transition: background .15s, color .15s, transform .1s, box-shadow .15s;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #3f7d4f; color: #fff; box-shadow: 0 8px 20px -10px rgba(63,125,79,.7); }
.btn-primary:hover { background: #2f6440; }
.btn-accent { background: #d9831f; color: #fff; box-shadow: 0 8px 20px -10px rgba(217,131,31,.7); }
.btn-accent:hover { background: #bb6717; }
.btn-ghost { border-color: rgba(28,33,27,.14); color: #1c211b; background: #fff; }
.btn-ghost:hover { background: rgba(28,33,27,.04); }
.dark .btn-ghost { border-color: rgba(255,255,255,.16); color: #f5f5f4; background: rgba(255,255,255,.03); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.07); }
.btn-danger { color: #b91c1c; border-color: rgba(185,28,28,.25); background: #fff; }
.btn-danger:hover { background: #fef2f2; }
.dark .btn-danger { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); color: #fca5a5; }
.btn-sm { padding: .42rem .8rem; font-size: .8rem; border-radius: .75rem; }

/* Form controls */
.label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; color: rgba(28,33,27,.72); }
.dark .label { color: rgba(231,229,228,.78); }
.field {
  width: 100%; border-radius: .9rem; border: 1px solid rgba(28,33,27,.13);
  background: #fff; padding: .62rem .85rem; font-size: .9rem; color: #1c211b;
  transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.field::placeholder { color: rgba(28,33,27,.38); }
.field:focus { outline: none; border-color: #3f7d4f; box-shadow: 0 0 0 3px rgba(63,125,79,.16); }
.dark .field { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #f5f5f4; }
.dark .field::placeholder { color: rgba(231,229,228,.4); }
.dark .field:focus { border-color: #5e9a70; box-shadow: 0 0 0 3px rgba(94,154,112,.22); }
textarea.field { line-height: 1.5; resize: vertical; }

/* Chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px;
  padding: .2rem .6rem; font-size: .72rem; font-weight: 600; line-height: 1.2;
  background: rgba(63,125,79,.1); color: #275033; border: 1px solid rgba(63,125,79,.2);
}
.dark .chip { background: rgba(94,154,112,.16); color: #bbd8c2; border-color: rgba(94,154,112,.3); }
.chip-accent { background: rgba(217,131,31,.12); color: #964c16; border-color: rgba(217,131,31,.25); }
.dark .chip-accent { background: rgba(232,158,53,.16); color: #f2cf93; border-color: rgba(232,158,53,.3); }
.chip-muted { background: rgba(28,33,27,.06); color: rgba(28,33,27,.6); border-color: rgba(28,33,27,.1); }
.dark .chip-muted { background: rgba(255,255,255,.06); color: rgba(231,229,228,.6); border-color: rgba(255,255,255,.1); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(28,33,27,.45); padding: .6rem .75rem; }
.dark .tbl th { color: rgba(231,229,228,.4); }
.tbl td { padding: .7rem .75rem; border-top: 1px solid rgba(28,33,27,.07); }
.dark .tbl td { border-color: rgba(255,255,255,.07); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(28,33,27,.18); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border: 3px solid transparent; background-clip: padding-box; }

/* Animated entrance for cards */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .4s ease both; }