/* =========================================================
   TEMPLATEADDA — FINAL UTILITY + HEADER SYSTEM (PRO)
   Premium SaaS • Scalable • Production Ready
   ========================================================= */

@import url("./branding.css");

/* =========================
   1. SPACING SYSTEM
   ========================= */

.ta-m-0{margin:0!important}
.ta-m-1{margin:var(--ta-space-1)}
.ta-m-2{margin:var(--ta-space-2)}
.ta-m-3{margin:var(--ta-space-3)}
.ta-m-4{margin:var(--ta-space-4)}
.ta-m-6{margin:var(--ta-space-6)}
.ta-m-8{margin:var(--ta-space-8)}
.ta-m-12{margin:var(--ta-space-12)}

.ta-mx-auto{margin-inline:auto}
.ta-my-auto{margin-block:auto}

.ta-mt-0{margin-top:0!important}
.ta-mt-2{margin-top:var(--ta-space-2)}
.ta-mt-4{margin-top:var(--ta-space-4)}
.ta-mt-8{margin-top:var(--ta-space-8)}
.ta-mt-12{margin-top:var(--ta-space-12)}

.ta-mb-0{margin-bottom:0!important}
.ta-mb-2{margin-bottom:var(--ta-space-2)}
.ta-mb-4{margin-bottom:var(--ta-space-4)}
.ta-mb-8{margin-bottom:var(--ta-space-8)}
.ta-mb-12{margin-bottom:var(--ta-space-12)}

.ta-p-0{padding:0!important}
.ta-p-2{padding:var(--ta-space-2)}
.ta-p-4{padding:var(--ta-space-4)}
.ta-p-6{padding:var(--ta-space-6)}
.ta-p-8{padding:var(--ta-space-8)}
.ta-p-12{padding:var(--ta-space-12)}

.ta-px-2{padding-inline:var(--ta-space-2)}
.ta-px-4{padding-inline:var(--ta-space-4)}
.ta-px-8{padding-inline:var(--ta-space-8)}

.ta-py-2{padding-block:var(--ta-space-2)}
.ta-py-4{padding-block:var(--ta-space-4)}
.ta-py-8{padding-block:var(--ta-space-8)}

/* =========================
   2. GAP
   ========================= */
.ta-gap-1{gap:var(--ta-space-1)}
.ta-gap-2{gap:var(--ta-space-2)}
.ta-gap-3{gap:var(--ta-space-3)}
.ta-gap-4{gap:var(--ta-space-4)}
.ta-gap-6{gap:var(--ta-space-6)}
.ta-gap-8{gap:var(--ta-space-8)}

/* =========================
   3. TYPOGRAPHY
   ========================= */
.ta-text-xs{font-size:var(--ta-text-xs)}
.ta-text-sm{font-size:var(--ta-text-sm)}
.ta-text-md{font-size:var(--ta-text-md)}
.ta-text-lg{font-size:var(--ta-text-lg)}
.ta-text-xl{font-size:var(--ta-text-xl)}
.ta-text-2xl{font-size:var(--ta-text-2xl)}

.ta-font-bold{font-weight:700}
.ta-font-semibold{font-weight:600}

.ta-text-primary{color:var(--ta-primary)}
.ta-text-secondary{color:var(--ta-secondary)}
.ta-text-soft{color:var(--ta-text-soft)}
.ta-text-faint{color:var(--ta-text-faint)}

/* =========================
   4. LAYOUT
   ========================= */
.ta-d-none{display:none!important}
.ta-d-flex{display:flex!important}
.ta-d-grid{display:grid!important}
.ta-d-inline-flex{display:inline-flex!important}

.ta-items-center{align-items:center}
.ta-justify-between{justify-content:space-between}

.ta-w-full{width:100%}

/* =========================
   5. BORDERS & SHADOW
   ========================= */
.ta-border{border:1px solid var(--ta-border)}
.ta-border-strong{border:1px solid var(--ta-border-strong)}

.ta-rounded-md{border-radius:var(--ta-radius-md)}
.ta-rounded-xl{border-radius:var(--ta-radius-xl)}
.ta-rounded-full{border-radius:var(--ta-radius-pill)}

.ta-shadow-sm{box-shadow:var(--ta-shadow-sm)}
.ta-shadow-md{box-shadow:var(--ta-shadow-md)}
.ta-shadow-lg{box-shadow:var(--ta-shadow-lg)}