/* =====================================================================
   MIdS — Shared UI Design System
   ---------------------------------------------------------------------
   One consistent design language (spec #22) reused across pages.
   • Global design tokens (colors / radius / shadow / motion)
   • Prompt typography
   • Reusable components: buttons, cards, badges, pagination, forms,
     skeletons, micro-interactions
   Namespaced under `.mids` / `.mids-*` so it composes with Tailwind and
   never leaks into the shared footer or other-page chrome.
   ===================================================================== */

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

/* ── Design tokens — ONE system: brand + accent + status ──────────── */
:root {
  --mids-primary:    #5B4BDB;              /* brand primary */
  --mids-primary-600:#5B4BDB;
  --mids-primary-700:#4A3BC0;              /* hover */
  --mids-primary-50: #EEECFB;             /* tints */
  --mids-primary-rgb:91,75,219;            /* for translucent shadows/rings */
  --mids-secondary:  #22C7E8;              /* accent — highlights only, sparingly */
  --mids-secondary-600:#0E9EC0;           /* AA-safe accent for text/icons on white */
  --mids-accent:     #22C7E8;
  --mids-success:    #22C55E;
  --mids-warning:    #F59E0B;
  --mids-danger:     #EF4444;
  --mids-info:       #0EA5E9;
  --mids-bg:         #F8FAFC;
  --mids-border:     #E5E7EB;

  --mids-radius:     18px;                 /* cards */
  --mids-radius-sm:  12px;
  --mids-radius-pill:999px;

  /* ONE shadow system */
  --mids-shadow-sm:  0 8px 24px rgba(15,23,42,.08);
  --mids-shadow-md:  0 12px 28px rgba(15,23,42,.12);
  --mids-shadow-lg:  0 24px 48px -12px rgba(15,23,42,.20);

  --mids-motion:     .25s cubic-bezier(.4, 0, .2, 1);
}

/* ── Typography (spec #14) ────────────────────────────────────────── */
.mids {
  font-family: 'Prompt', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.7;
}
.mids h1, .mids h2, .mids h3, .mids h4, .mids h5 { font-weight: 700; line-height: 1.25; }

/* Section rhythm (spec #15) */
.mids-section { padding-top: 5rem; padding-bottom: 5rem; }      /* 80px */
@media (max-width: 640px) { .mids-section { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* ── Cards (spec #6/#7) ───────────────────────────────────────────── */
.mids-card {
  /* use background-color (not the `background` shorthand) so Tailwind
     gradient utilities like `bg-gradient-to-br` still show through */
  background-color: #fff;
  border-radius: var(--mids-radius);
  box-shadow: var(--mids-shadow-sm);
  transition: transform var(--mids-motion), box-shadow var(--mids-motion);
}
.mids-card--hover:hover,
.mids-card--hover:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--mids-shadow-md);
}
/* Glass effect variant (spec #7/#11) */
.mids-glass {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
}

/* Image zoom on card hover (spec #16) */
.mids-zoom { overflow: hidden; }
.mids-zoom img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.mids-card--hover:hover .mids-zoom img { transform: scale(1.06); }

/* ── Buttons (spec #22) ───────────────────────────────────────────── */
.mids-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .9rem;
  padding: 0 1.5rem; min-height: 48px;                   /* Contact button height (spec) */
  border-radius: var(--mids-radius-sm);                  /* rounded-xl like Contact */
  transition: transform var(--mids-motion), filter var(--mids-motion), background-color var(--mids-motion), box-shadow var(--mids-motion);
  cursor: pointer; position: relative; overflow: hidden;
}
.mids-btn:hover { transform: translateY(-1px); }         /* soft hover lift */
.mids-btn:active { transform: scale(.98); }
/* Only 4 button styles: Primary (flat brand), Secondary (outline), Danger, Success */
.mids-btn-primary { background-color: var(--mids-primary); color: #fff; box-shadow: 0 8px 20px -6px rgba(var(--mids-primary-rgb), .5); }
.mids-btn-primary:hover { background-color: var(--mids-primary-700); }
.mids-btn-secondary,
.mids-btn-ghost { background: transparent; border: 2px solid var(--mids-border); color: inherit; }
.mids-btn-secondary:hover,
.mids-btn-ghost:hover { border-color: var(--mids-primary); color: var(--mids-primary); background: var(--mids-primary-50); }
.mids-btn-danger  { background-color: var(--mids-danger);  color: #fff; }
.mids-btn-danger:hover  { filter: brightness(.94); }
.mids-btn-success { background-color: var(--mids-success); color: #fff; }
.mids-btn-success:hover { filter: brightness(.94); }
.mids-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.mids-btn:disabled:active, .mids-btn:disabled:hover { transform: none; filter: none; }

/* Button ripple (spec #16) */
.mids-ripple { position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.5); animation: mids-ripple .6s linear; pointer-events: none; }
@keyframes mids-ripple { to { transform: scale(4); opacity: 0; } }

/* ── Badges (spec #22) ────────────────────────────────────────────── */
.mids-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  padding: .3rem .6rem; border-radius: var(--mids-radius-pill); white-space: nowrap;
}
.mids-badge-primary { background: rgba(var(--mids-primary-rgb),.12); color: var(--mids-primary); }
.mids-badge-success { background: rgba(34,197,94,.14);  color: #15803d; }
.mids-badge-warning { background: rgba(245,158,11,.16); color: #b45309; }
.mids-badge-danger  { background: rgba(239,68,68,.14);  color: #b91c1c; }
.mids-badge-cyan    { background: rgba(6,182,212,.14);  color: #0e7490; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.mids-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: #64748b; }
.mids-breadcrumb a { color: #64748b; transition: color var(--mids-motion); }
.mids-breadcrumb a:hover { color: var(--mids-primary); }
.mids-breadcrumb [aria-current="page"] { color: #334155; font-weight: 600; }
.mids-breadcrumb .sep { color: #cbd5e1; }

/* ── Pagination (spec #10) ────────────────────────────────────────── */
.mids-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .5rem;
  border-radius: var(--mids-radius-pill); font-weight: 600; font-size: .9rem;
  background: #fff; color: #475569; border: 1px solid #e2e8f0;
  transition: all var(--mids-motion);
}
.mids-page-btn:hover { border-color: var(--mids-primary); color: var(--mids-primary); }
.mids-page-btn[aria-current="page"] { background: var(--mids-primary); color: #fff; border-color: var(--mids-primary); box-shadow: 0 6px 14px -4px rgba(var(--mids-primary-rgb),.5); }
.mids-page-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ── Forms / filter controls (spec #5/#9) ─────────────────────────── */
/* `:where()` keeps the base padding at 0 specificity so Tailwind spacing
   utilities (pl-9, pr-28, py-3.5 …) always win — fixes search-icon overlap. */
:where(.mids-input) {
  width: 100%; padding: .7rem 1rem; font-size: .95rem;
  border-radius: var(--mids-radius-sm);
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
  transition: border-color var(--mids-motion), box-shadow var(--mids-motion);
}
.mids-input:focus { outline: none; border-color: var(--mids-primary); box-shadow: 0 0 0 3px rgba(var(--mids-primary-rgb),.18); }

/* ── Skeleton loading (spec #16/#19) ──────────────────────────────── */
.mids-skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%; animation: mids-shimmer 1.2s ease infinite; border-radius: var(--mids-radius-sm);
}
@keyframes mids-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Card reveal (spec #16/#21) */
.mids-reveal { opacity: 0; transform: translateY(12px); }
.mids-reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; }

/* Animated counter baseline */
.mids-counter { font-variant-numeric: tabular-nums; }

/* ── Icon circle (Contact page pattern) ───────────────────────────── */
.mids-icon-circle {
  width: 48px; height: 48px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mids-icon-circle.is-violet { background: var(--mids-primary-50); color: var(--mids-primary); }
.mids-icon-circle.is-cyan   { background: #ECFCFF; color: var(--mids-secondary-600); }
.mids-icon-circle.is-indigo { background: var(--mids-primary-50); color: var(--mids-primary); }
.mids-icon-circle.is-green  { background: #F0FDF4; color: #16A34A; }
.mids-icon-circle.is-amber  { background: #FFFBEB; color: #B45309; }

/* ── Form controls (Contact page pattern) ─────────────────────────── */
:where(.mids-field) {
  width: 100%; padding: .7rem 1rem; font-size: .9rem; line-height: 1.5;
  border-radius: var(--mids-radius-sm);
  border: 1px solid var(--mids-border); background: #fff; color: #0f172a;
  transition: border-color var(--mids-motion), box-shadow var(--mids-motion);
}
.mids-field:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--mids-primary); }
.mids-label { display: block; font-size: .8125rem; font-weight: 600; color: #374151; margin-bottom: .5rem; }
.mids-label .req { color: var(--mids-danger); margin-left: 2px; }
/* Helper + inline validation error (min-height reserves space → no layout jump) */
.mids-helper { font-size: .75rem; color: #6b7280; margin-top: .35rem; }
.mids-error  { font-size: .75rem; font-weight: 500; color: var(--mids-danger); margin-top: .35rem; min-height: 1rem; }

/* ── Alerts (modern soft card, spec) ──────────────────────────────── */
.mids-alert {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem; border-radius: var(--mids-radius-sm);
  border: 1px solid transparent; font-size: .875rem;
}
.mids-alert svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.mids-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.mids-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.mids-alert-danger  { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.mids-alert-info    { background: #F0F9FF; border-color: #BAE6FD; color: #0369A1; }

/* ── Hero (full-bleed image + dark gradient overlay, Contact pattern) ─ */
.mids-hero { position: relative; overflow: hidden; }
.mids-hero__overlay { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,6,23,.72), rgba(2,6,23,.42) 55%, rgba(2,6,23,.28)); }
.mids-hero__eyebrow { color: #C4B5FD; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; }

/* ── Accessibility (spec #18) ─────────────────────────────────────── */
.mids a:focus-visible, .mids button:focus-visible,
.mids input:focus-visible, .mids select:focus-visible,
.mids [tabindex]:focus-visible {
  outline: 3px solid var(--mids-primary); outline-offset: 2px; border-radius: 8px;
}
.mids-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Reduced motion (spec #21) ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mids *, .mids *::before, .mids *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}