/*  ==========================================================
    Stratenity Design System – Custom Layer on Tailwind
    ========================================================== */

/* ---------- Theme Variables ---------- */
:root {
  --indigo:   #1e3a8a;
  --indigo-d: #233d99;
  --blue:     #2563eb;
  --green:    #16a34a;
  --yellow:   #f59e0b;
  --purple:   #7c3aed;
  --pink:     #db2777;
  --gray-50:  #f8fafc;
  --gray-700: #475569;
  --radius:   8px;
  --trans:    0.2s ease;
}

/* ---------- Global Tweaks ---------- */
html, body { scroll-behavior: smooth; }
body       { -webkit-font-smoothing: antialiased; }

/* ---------- Navigation Styles ---------- */
.nav-layer    { backdrop-filter: blur(10px); }
.nav-shadow   { box-shadow: 0 2px 6px rgba(0,0,0,.05); }

/* ---------- Hero Utility ---------- */
.hero-gradient { background: linear-gradient(135deg, var(--gray-50), #ffffff); }

/* ---------- Section Spacing ---------- */
.section      { padding-block: 4.5rem; }
.section-xs   { padding-block: 2rem;    }
.section-lg   { padding-block: 6rem;    }

/* ---------- Cards ---------- */
.card {
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  padding: 1rem 1.25rem;
  transition: transform var(--trans), box-shadow var(--trans);
}
.card:hover  { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* Accent borders */
.border-indigo   { border-left: 6px solid var(--indigo); }
.border-blue     { border-left: 6px solid var(--blue);   }
.border-green    { border-left: 6px solid var(--green);  }
.border-yellow   { border-left: 6px solid var(--yellow); }
.border-purple   { border-left: 6px solid var(--purple); }
.border-pink     { border-left: 6px solid var(--pink);   }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background var(--trans), transform var(--trans);
}
.btn:hover      { transform: scale(1.04); }

.btn-primary    { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-d); }

.btn-secondary  { background: #ffffff; color: var(--indigo); border: 2px solid var(--indigo); }
.btn-secondary:hover { background: var(--indigo); color: #fff; }

.btn-ghost      { background: transparent; color: var(--indigo); }
.btn-ghost:hover{ background: var(--gray-50); }

/* ---------- Badge / Tag ---------- */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-weight: 600;
}
.badge-indigo { background: var(--indigo); color: #fff; }
.badge-green  { background: var(--green);  color: #fff; }
.badge-yellow { background: var(--yellow); color: #fff; }

/* ---------- Alerts ---------- */
.alert {
  border-left: 6px solid;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
}
.alert-info    { border-color: var(--blue);   background: #eff6ff; color: var(--blue); }
.alert-success { border-color: var(--green);  background: #ecfdf5; color: var(--green); }
.alert-warning { border-color: var(--yellow); background: #fefce8; color: var(--yellow); }
.alert-error   { border-color: var(--pink);   background: #fdf2f8; color: var(--pink); }

/* ---------- Collapsible Controls ---------- */
.collapsible-btn {
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  transition: background var(--trans);
}
.collapsible-btn:hover { background: var(--indigo-d); }

.collapsible-content {
  display: none;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1rem;
}

/* ---------- Grid Helpers ---------- */
.grid-auto   { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }

/* ---------- Shadow Helper ---------- */
.shadow-sm   { box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.shadow-md   { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.shadow-lg   { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* ---------- Transition Helper ---------- */
.ease        { transition: all var(--trans); }

/* ---------- Footer Links ---------- */
footer a:hover { text-decoration: underline; }

/* ============================== */