/* ============================================================
   Mesob Equb (መሶብ እቁብ) — client app skin
   Loaded AFTER /css/output.css (compiled Tailwind v4).
   Strategy: the compiled utilities resolve through --color-* custom
   properties, so remapping those variables (un-layered :root beats
   the @layer theme definitions) re-skins every utility — including
   hover:/focus:/group-hover: variants — across all pages. Explicit
   escaped-selector overrides below act as belt-and-braces for the
   highest-traffic classes and arbitrary-value utilities.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Ethiopic:wght@400;600;700&display=swap");

/* ---------- 1. Brand tokens ---------- */
:root {
  /* brand */
  --mesob-red: #B3271E;  --mesob-red-dark: #8C1E17;
  --mesob-green: #1E7D32; --mesob-green-dark: #14591F; --mesob-green-bright: #2E9E47;
  --mesob-gold: #D9A521;  --mesob-gold-soft: #F3E3B8;
  /* light neutrals (warm, basket-toned) */
  --mesob-cream: #FAF6EE; --mesob-sand: #F1E9D8; --mesob-line: #E5DCC9;
  --mesob-ink: #221F18;   --mesob-muted: #6F695C;
  /* dark neutrals */
  --mesob-night: #171410; --mesob-night-2: #211D15; --mesob-night-3: #2A251C;
  --mesob-night-line: #3A342A; --mesob-night-text: #EDE7D8; --mesob-night-muted: #A89F8C;
}

/* ---------- 2. Tailwind palette remap (v4 theme variables) ----------
   Covers bg-*, text-*, border-*, from-*, to-*, via-*, ring-*, divide-*,
   placeholder-*, accent-* and every hover:/focus:/group-hover:/disabled:
   variant of them, because all of those rules read these variables. */
:root {
  /* green → Mesob green family */
  --color-green-50:  #F1F7F0;
  --color-green-100: #E7F0E9;
  --color-green-200: #CFE3D2;
  --color-green-300: #A9CDB0;
  --color-green-400: #58AC6C;
  --color-green-500: #2E9E47;
  --color-green-600: #1E7D32;
  --color-green-700: #186A2A;
  --color-green-800: #14591F;
  --color-green-900: #0E441A;

  /* emerald (used in gradients) → same family */
  --color-emerald-50:  #F1F7F0;
  --color-emerald-100: #E7F0E9;
  --color-emerald-500: #2E9E47;
  --color-emerald-600: #1E7D32;
  --color-emerald-700: #14591F;

  /* red → Mesob red family (danger) */
  --color-red-50:  #FBF1F0;
  --color-red-100: #F6E2E0;
  --color-red-200: #EEC7C4;
  --color-red-300: #E0A19C;
  --color-red-400: #CE6A62;
  --color-red-500: #BE3F36;
  --color-red-600: #B3271E;
  --color-red-700: #8C1E17;
  --color-red-800: #741912;
  --color-red-900: #5C140E;

  /* yellow → Mesob gold family (warning / highlight) */
  --color-yellow-50:  #FCF7E9;
  --color-yellow-100: #F3E3B8;
  --color-yellow-200: #EDD592;
  --color-yellow-300: #E4C15C;
  --color-yellow-400: #DFB13A;
  --color-yellow-500: #D9A521;
  --color-yellow-600: #B9891A;
  --color-yellow-700: #976F15;
  --color-yellow-800: #7A5A12;
  --color-yellow-900: #64490F;

  /* gray → warm basket-toned neutrals */
  --color-gray-50:  #FAF7F0;
  --color-gray-100: #F1ECDF;
  --color-gray-200: #E5DCC9;
  --color-gray-300: #D3C9B4;
  --color-gray-400: #A89F8C;
  --color-gray-500: #857D6C;
  --color-gray-600: #6F695C;
  --color-gray-700: #514C3E;
  --color-gray-800: #383325;
  --color-gray-900: #221F18;
}

/* ---------- 3. Explicit utility overrides (belt & braces) ----------
   Escaped selectors match the compiled Tailwind class names exactly. */
.bg-green-500, .bg-green-600 { background-color: var(--mesob-green); }
.bg-green-700 { background-color: var(--mesob-green-dark); }
.hover\:bg-green-600:hover { background-color: var(--mesob-green-bright); }
.hover\:bg-green-700:hover { background-color: var(--mesob-green-dark); }
.text-green-500, .text-green-600 { color: var(--mesob-green); }
.text-green-700, .hover\:text-green-700:hover { color: var(--mesob-green-dark); }
.hover\:text-green-500:hover, .hover\:text-green-600:hover,
.group-hover\:text-green-500:is(:where(.group):hover *),
.group-hover\:text-green-600:is(:where(.group):hover *) { color: var(--mesob-green); }
.border-green-500, .hover\:border-green-500:hover { border-color: var(--mesob-green); }
.focus\:border-green-500:focus { border-color: var(--mesob-green); }
.focus\:ring-green-500:focus { --tw-ring-color: color-mix(in srgb, var(--mesob-gold) 55%, transparent); }
.focus\:ring-green-200:focus, .focus\:ring-green-300:focus { --tw-ring-color: color-mix(in srgb, var(--mesob-gold) 40%, transparent); }
/* arbitrary bright-green value used in templates */
.bg-\[\#49b11f\] { background-color: var(--mesob-green); }

/* ---------- 4. Typography ---------- */
html, body {
  font-family: "Plus Jakarta Sans", "Noto Sans Ethiopic", "Segoe UI", system-ui, sans-serif;
  color: var(--mesob-ink);
}
body { background-color: var(--mesob-cream); }
h1, h2, h3, h4, .font-bold, .font-extrabold {
  letter-spacing: -0.015em;
}
table, .tabular-nums, [class*="stat"] { font-variant-numeric: tabular-nums; }
::selection { background: var(--mesob-gold-soft); color: var(--mesob-ink); }

/* ---------- 5. Signature woven band ---------- */
.mesob-band {
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--mesob-red) 0 12px,
    var(--mesob-gold) 12px 24px,
    var(--mesob-green) 24px 36px);
}

/* ---------- 6. Components ---------- */
.mesob-card {
  background: #ffffff;
  border: 1px solid var(--mesob-line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(34, 31, 24, .07);
}

.mesob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 10px;
  padding: .75rem 1.25rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  background: linear-gradient(160deg, var(--mesob-green-bright), var(--mesob-green-dark));
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.mesob-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 89, 31, .28);
  filter: saturate(1.05);
}
.mesob-btn:active { transform: translateY(0); }
.mesob-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.mesob-btn--danger {
  background: linear-gradient(160deg, var(--mesob-red), var(--mesob-red-dark));
}
.mesob-btn--danger:hover { box-shadow: 0 8px 20px rgba(140, 30, 23, .28); }
.mesob-btn--secondary {
  background: transparent;
  color: var(--mesob-green);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.mesob-btn--secondary:hover { background: var(--color-green-50, #F1F7F0); box-shadow: inset 0 0 0 1.5px currentColor; }

.mesob-input {
  width: 100%;
  border: 1.5px solid var(--mesob-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--mesob-ink);
  padding: .75rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mesob-input::placeholder { color: var(--mesob-muted); opacity: .75; }
.mesob-input:focus {
  border-color: var(--mesob-green);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mesob-gold) 45%, transparent);
}

.mesob-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  background: #E7F0E9;
  color: var(--mesob-green-dark);
}
.mesob-chip--danger { background: #F6E2E0; color: var(--mesob-red-dark); }
.mesob-chip--warning { background: var(--mesob-gold-soft); color: #7A5A12; }
.mesob-chip--neutral { background: var(--mesob-sand); color: var(--mesob-muted); }

.mesob-eyebrow {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--mesob-muted);
}

.mesob-stat {
  border-left: 3px solid var(--mesob-green);
  padding-left: .9rem;
}
.mesob-stat .mesob-stat-number {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* ---------- 7. Focus-visible gold ring (global) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mesob-gold) 60%, transparent);
  outline-offset: 2px;
}

/* ---------- 8. Reduced motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mesob-btn:hover { transform: none; }
}