/* ==========================================================================
   Tecko Design System — Utility Classes
   Version: 1.0.0
   ========================================================================== */

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.tecko-block { display: block; }
.tecko-inline-block { display: inline-block; }
.tecko-inline { display: inline; }
.tecko-flex { display: flex; }
.tecko-inline-flex { display: inline-flex; }
.tecko-grid { display: grid; }
.tecko-hidden { display: none; }

/* ==========================================================================
   FLEX
   ========================================================================== */

.tecko-flex-row { flex-direction: row; }
.tecko-flex-col { flex-direction: column; }
.tecko-flex-wrap { flex-wrap: wrap; }
.tecko-flex-nowrap { flex-wrap: nowrap; }
.tecko-flex-1 { flex: 1; }
.tecko-flex-auto { flex: auto; }
.tecko-flex-none { flex: none; }
.tecko-flex-shrink-0 { flex-shrink: 0; }

/* Align items */
.tecko-items-start { align-items: flex-start; }
.tecko-items-center { align-items: center; }
.tecko-items-end { align-items: flex-end; }
.tecko-items-stretch { align-items: stretch; }
.tecko-items-baseline { align-items: baseline; }

/* Justify content */
.tecko-justify-start { justify-content: flex-start; }
.tecko-justify-center { justify-content: center; }
.tecko-justify-end { justify-content: flex-end; }
.tecko-justify-between { justify-content: space-between; }
.tecko-justify-around { justify-content: space-around; }
.tecko-justify-evenly { justify-content: space-evenly; }

/* Gap */
.tecko-gap-0 { gap: 0; }
.tecko-gap-1 { gap: var(--tecko-space-1); }
.tecko-gap-2 { gap: var(--tecko-space-2); }
.tecko-gap-3 { gap: var(--tecko-space-3); }
.tecko-gap-4 { gap: var(--tecko-space-4); }
.tecko-gap-5 { gap: var(--tecko-space-5); }
.tecko-gap-6 { gap: var(--tecko-space-6); }
.tecko-gap-8 { gap: var(--tecko-space-8); }

/* ==========================================================================
   GRID
   ========================================================================== */

.tecko-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.tecko-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tecko-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tecko-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.tecko-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.tecko-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.tecko-col-span-1 { grid-column: span 1; }
.tecko-col-span-2 { grid-column: span 2; }
.tecko-col-span-3 { grid-column: span 3; }
.tecko-col-span-4 { grid-column: span 4; }
.tecko-col-span-6 { grid-column: span 6; }
.tecko-col-span-full { grid-column: 1 / -1; }

/* ==========================================================================
   SPACING — Margin
   ========================================================================== */

/* Margin all */
.tecko-m-0 { margin: 0; }
.tecko-m-1 { margin: var(--tecko-space-1); }
.tecko-m-2 { margin: var(--tecko-space-2); }
.tecko-m-3 { margin: var(--tecko-space-3); }
.tecko-m-4 { margin: var(--tecko-space-4); }
.tecko-m-5 { margin: var(--tecko-space-5); }
.tecko-m-6 { margin: var(--tecko-space-6); }
.tecko-m-8 { margin: var(--tecko-space-8); }
.tecko-m-auto { margin: auto; }

/* Margin top */
.tecko-mt-0 { margin-top: 0; }
.tecko-mt-1 { margin-top: var(--tecko-space-1); }
.tecko-mt-2 { margin-top: var(--tecko-space-2); }
.tecko-mt-3 { margin-top: var(--tecko-space-3); }
.tecko-mt-4 { margin-top: var(--tecko-space-4); }
.tecko-mt-5 { margin-top: var(--tecko-space-5); }
.tecko-mt-6 { margin-top: var(--tecko-space-6); }
.tecko-mt-8 { margin-top: var(--tecko-space-8); }
.tecko-mt-10 { margin-top: var(--tecko-space-10); }
.tecko-mt-12 { margin-top: var(--tecko-space-12); }
.tecko-mt-16 { margin-top: var(--tecko-space-16); }

/* Margin right */
.tecko-mr-0 { margin-right: 0; }
.tecko-mr-1 { margin-right: var(--tecko-space-1); }
.tecko-mr-2 { margin-right: var(--tecko-space-2); }
.tecko-mr-3 { margin-right: var(--tecko-space-3); }
.tecko-mr-4 { margin-right: var(--tecko-space-4); }
.tecko-mr-5 { margin-right: var(--tecko-space-5); }
.tecko-mr-6 { margin-right: var(--tecko-space-6); }
.tecko-mr-8 { margin-right: var(--tecko-space-8); }

/* Margin bottom */
.tecko-mb-0 { margin-bottom: 0; }
.tecko-mb-1 { margin-bottom: var(--tecko-space-1); }
.tecko-mb-2 { margin-bottom: var(--tecko-space-2); }
.tecko-mb-3 { margin-bottom: var(--tecko-space-3); }
.tecko-mb-4 { margin-bottom: var(--tecko-space-4); }
.tecko-mb-5 { margin-bottom: var(--tecko-space-5); }
.tecko-mb-6 { margin-bottom: var(--tecko-space-6); }
.tecko-mb-8 { margin-bottom: var(--tecko-space-8); }
.tecko-mb-10 { margin-bottom: var(--tecko-space-10); }
.tecko-mb-12 { margin-bottom: var(--tecko-space-12); }
.tecko-mb-16 { margin-bottom: var(--tecko-space-16); }

/* Margin left */
.tecko-ml-0 { margin-left: 0; }
.tecko-ml-1 { margin-left: var(--tecko-space-1); }
.tecko-ml-2 { margin-left: var(--tecko-space-2); }
.tecko-ml-3 { margin-left: var(--tecko-space-3); }
.tecko-ml-4 { margin-left: var(--tecko-space-4); }
.tecko-ml-5 { margin-left: var(--tecko-space-5); }
.tecko-ml-6 { margin-left: var(--tecko-space-6); }
.tecko-ml-8 { margin-left: var(--tecko-space-8); }
.tecko-ml-auto { margin-left: auto; }

/* Margin horizontal */
.tecko-mx-0 { margin-left: 0; margin-right: 0; }
.tecko-mx-1 { margin-left: var(--tecko-space-1); margin-right: var(--tecko-space-1); }
.tecko-mx-2 { margin-left: var(--tecko-space-2); margin-right: var(--tecko-space-2); }
.tecko-mx-3 { margin-left: var(--tecko-space-3); margin-right: var(--tecko-space-3); }
.tecko-mx-4 { margin-left: var(--tecko-space-4); margin-right: var(--tecko-space-4); }
.tecko-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin vertical */
.tecko-my-0 { margin-top: 0; margin-bottom: 0; }
.tecko-my-1 { margin-top: var(--tecko-space-1); margin-bottom: var(--tecko-space-1); }
.tecko-my-2 { margin-top: var(--tecko-space-2); margin-bottom: var(--tecko-space-2); }
.tecko-my-3 { margin-top: var(--tecko-space-3); margin-bottom: var(--tecko-space-3); }
.tecko-my-4 { margin-top: var(--tecko-space-4); margin-bottom: var(--tecko-space-4); }
.tecko-my-6 { margin-top: var(--tecko-space-6); margin-bottom: var(--tecko-space-6); }
.tecko-my-8 { margin-top: var(--tecko-space-8); margin-bottom: var(--tecko-space-8); }

/* ==========================================================================
   SPACING — Padding
   ========================================================================== */

/* Padding all */
.tecko-p-0 { padding: 0; }
.tecko-p-1 { padding: var(--tecko-space-1); }
.tecko-p-2 { padding: var(--tecko-space-2); }
.tecko-p-3 { padding: var(--tecko-space-3); }
.tecko-p-4 { padding: var(--tecko-space-4); }
.tecko-p-5 { padding: var(--tecko-space-5); }
.tecko-p-6 { padding: var(--tecko-space-6); }
.tecko-p-8 { padding: var(--tecko-space-8); }

/* Padding top */
.tecko-pt-0 { padding-top: 0; }
.tecko-pt-1 { padding-top: var(--tecko-space-1); }
.tecko-pt-2 { padding-top: var(--tecko-space-2); }
.tecko-pt-3 { padding-top: var(--tecko-space-3); }
.tecko-pt-4 { padding-top: var(--tecko-space-4); }
.tecko-pt-5 { padding-top: var(--tecko-space-5); }
.tecko-pt-6 { padding-top: var(--tecko-space-6); }
.tecko-pt-8 { padding-top: var(--tecko-space-8); }
.tecko-pt-10 { padding-top: var(--tecko-space-10); }
.tecko-pt-12 { padding-top: var(--tecko-space-12); }
.tecko-pt-16 { padding-top: var(--tecko-space-16); }

/* Padding right */
.tecko-pr-0 { padding-right: 0; }
.tecko-pr-1 { padding-right: var(--tecko-space-1); }
.tecko-pr-2 { padding-right: var(--tecko-space-2); }
.tecko-pr-3 { padding-right: var(--tecko-space-3); }
.tecko-pr-4 { padding-right: var(--tecko-space-4); }
.tecko-pr-5 { padding-right: var(--tecko-space-5); }
.tecko-pr-6 { padding-right: var(--tecko-space-6); }
.tecko-pr-8 { padding-right: var(--tecko-space-8); }

/* Padding bottom */
.tecko-pb-0 { padding-bottom: 0; }
.tecko-pb-1 { padding-bottom: var(--tecko-space-1); }
.tecko-pb-2 { padding-bottom: var(--tecko-space-2); }
.tecko-pb-3 { padding-bottom: var(--tecko-space-3); }
.tecko-pb-4 { padding-bottom: var(--tecko-space-4); }
.tecko-pb-5 { padding-bottom: var(--tecko-space-5); }
.tecko-pb-6 { padding-bottom: var(--tecko-space-6); }
.tecko-pb-8 { padding-bottom: var(--tecko-space-8); }
.tecko-pb-10 { padding-bottom: var(--tecko-space-10); }
.tecko-pb-12 { padding-bottom: var(--tecko-space-12); }
.tecko-pb-16 { padding-bottom: var(--tecko-space-16); }

/* Padding left */
.tecko-pl-0 { padding-left: 0; }
.tecko-pl-1 { padding-left: var(--tecko-space-1); }
.tecko-pl-2 { padding-left: var(--tecko-space-2); }
.tecko-pl-3 { padding-left: var(--tecko-space-3); }
.tecko-pl-4 { padding-left: var(--tecko-space-4); }
.tecko-pl-5 { padding-left: var(--tecko-space-5); }
.tecko-pl-6 { padding-left: var(--tecko-space-6); }
.tecko-pl-8 { padding-left: var(--tecko-space-8); }

/* Padding horizontal */
.tecko-px-0 { padding-left: 0; padding-right: 0; }
.tecko-px-1 { padding-left: var(--tecko-space-1); padding-right: var(--tecko-space-1); }
.tecko-px-2 { padding-left: var(--tecko-space-2); padding-right: var(--tecko-space-2); }
.tecko-px-3 { padding-left: var(--tecko-space-3); padding-right: var(--tecko-space-3); }
.tecko-px-4 { padding-left: var(--tecko-space-4); padding-right: var(--tecko-space-4); }
.tecko-px-5 { padding-left: var(--tecko-space-5); padding-right: var(--tecko-space-5); }
.tecko-px-6 { padding-left: var(--tecko-space-6); padding-right: var(--tecko-space-6); }
.tecko-px-8 { padding-left: var(--tecko-space-8); padding-right: var(--tecko-space-8); }

/* Padding vertical */
.tecko-py-0 { padding-top: 0; padding-bottom: 0; }
.tecko-py-1 { padding-top: var(--tecko-space-1); padding-bottom: var(--tecko-space-1); }
.tecko-py-2 { padding-top: var(--tecko-space-2); padding-bottom: var(--tecko-space-2); }
.tecko-py-3 { padding-top: var(--tecko-space-3); padding-bottom: var(--tecko-space-3); }
.tecko-py-4 { padding-top: var(--tecko-space-4); padding-bottom: var(--tecko-space-4); }
.tecko-py-5 { padding-top: var(--tecko-space-5); padding-bottom: var(--tecko-space-5); }
.tecko-py-6 { padding-top: var(--tecko-space-6); padding-bottom: var(--tecko-space-6); }
.tecko-py-8 { padding-top: var(--tecko-space-8); padding-bottom: var(--tecko-space-8); }

/* ==========================================================================
   TEXT
   ========================================================================== */

.tecko-text-left { text-align: left; }
.tecko-text-center { text-align: center; }
.tecko-text-right { text-align: right; }

.tecko-text-primary { color: var(--tecko-text-primary); }
.tecko-text-secondary { color: var(--tecko-text-secondary); }
.tecko-text-muted { color: var(--tecko-text-muted); }
.tecko-text-accent { color: var(--tecko-text-accent); }
.tecko-text-inverse { color: var(--tecko-text-inverse); }
.tecko-text-success { color: var(--tecko-success); }
.tecko-text-warning { color: var(--tecko-warning); }
.tecko-text-error { color: var(--tecko-error); }
.tecko-text-info { color: var(--tecko-info); }

.tecko-font-thin { font-weight: var(--tecko-font-thin); }
.tecko-font-light { font-weight: var(--tecko-font-light); }
.tecko-font-normal { font-weight: var(--tecko-font-regular); }
.tecko-font-medium { font-weight: var(--tecko-font-medium); }
.tecko-font-semibold { font-weight: var(--tecko-font-semibold); }
.tecko-font-bold { font-weight: var(--tecko-font-bold); }

.tecko-uppercase { text-transform: uppercase; }
.tecko-lowercase { text-transform: lowercase; }
.tecko-capitalize { text-transform: capitalize; }
.tecko-normal-case { text-transform: none; }

.tecko-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tecko-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tecko-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tecko-whitespace-nowrap { white-space: nowrap; }

/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.tecko-bg-primary { background-color: var(--tecko-bg-primary); }
.tecko-bg-secondary { background-color: var(--tecko-bg-secondary); }
.tecko-bg-dark { background-color: var(--tecko-black); }
.tecko-bg-accent { background-color: var(--tecko-accent); }
.tecko-bg-success { background-color: var(--tecko-success); }
.tecko-bg-warning { background-color: var(--tecko-warning); }
.tecko-bg-error { background-color: var(--tecko-error); }
.tecko-bg-info { background-color: var(--tecko-info); }
.tecko-bg-transparent { background-color: transparent; }

/* ==========================================================================
   WIDTH
   ========================================================================== */

.tecko-w-full { width: 100%; }
.tecko-w-auto { width: auto; }
.tecko-w-screen { width: 100vw; }

.tecko-max-w-sm { max-width: var(--tecko-container-sm); }
.tecko-max-w-md { max-width: var(--tecko-container-md); }
.tecko-max-w-lg { max-width: var(--tecko-container-lg); }
.tecko-max-w-xl { max-width: var(--tecko-container-xl); }
.tecko-max-w-full { max-width: 100%; }
.tecko-max-w-none { max-width: none; }

.tecko-min-w-0 { min-width: 0; }
.tecko-min-h-screen { min-height: 100vh; }
.tecko-h-full { height: 100%; }
.tecko-h-screen { height: 100vh; }

/* ==========================================================================
   BORDER
   ========================================================================== */

.tecko-border { border: 1px solid var(--tecko-border-light); }
.tecko-border-t { border-top: 1px solid var(--tecko-border-light); }
.tecko-border-r { border-right: 1px solid var(--tecko-border-light); }
.tecko-border-b { border-bottom: 1px solid var(--tecko-border-light); }
.tecko-border-l { border-left: 1px solid var(--tecko-border-light); }
.tecko-border-none { border: none; }

.tecko-rounded-none { border-radius: var(--tecko-radius-none); }
.tecko-rounded-sm { border-radius: var(--tecko-radius-sm); }
.tecko-rounded-md { border-radius: var(--tecko-radius-md); }
.tecko-rounded-lg { border-radius: var(--tecko-radius-lg); }
.tecko-rounded-xl { border-radius: var(--tecko-radius-xl); }
.tecko-rounded-full { border-radius: var(--tecko-radius-full); }

/* ==========================================================================
   SHADOW
   ========================================================================== */

.tecko-shadow-none { box-shadow: none; }
.tecko-shadow-sm { box-shadow: var(--tecko-shadow-sm); }
.tecko-shadow-md { box-shadow: var(--tecko-shadow-md); }
.tecko-shadow-lg { box-shadow: var(--tecko-shadow-lg); }

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.tecko-overflow-auto { overflow: auto; }
.tecko-overflow-hidden { overflow: hidden; }
.tecko-overflow-scroll { overflow: scroll; }
.tecko-overflow-x-auto { overflow-x: auto; }
.tecko-overflow-y-auto { overflow-y: auto; }

/* ==========================================================================
   POSITION
   ========================================================================== */

.tecko-relative { position: relative; }
.tecko-absolute { position: absolute; }
.tecko-fixed { position: fixed; }
.tecko-sticky { position: sticky; top: 0; }

.tecko-inset-0 { inset: 0; }
.tecko-top-0 { top: 0; }
.tecko-right-0 { right: 0; }
.tecko-bottom-0 { bottom: 0; }
.tecko-left-0 { left: 0; }

/* ==========================================================================
   CURSOR
   ========================================================================== */

.tecko-cursor-pointer { cursor: pointer; }
.tecko-cursor-default { cursor: default; }
.tecko-cursor-not-allowed { cursor: not-allowed; }

/* ==========================================================================
   MISC
   ========================================================================== */

.tecko-opacity-0 { opacity: 0; }
.tecko-opacity-50 { opacity: 0.5; }
.tecko-opacity-100 { opacity: 1; }

.tecko-select-none { user-select: none; }
.tecko-pointer-events-none { pointer-events: none; }

.tecko-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;
}

/* ==========================================================================
   RESPONSIVE VISIBILITY
   ========================================================================== */

@media (max-width: 640px) {
  .tecko-hide-sm { display: none !important; }
}

@media (max-width: 768px) {
  .tecko-hide-md { display: none !important; }
}

@media (max-width: 1024px) {
  .tecko-hide-lg { display: none !important; }
}

/* Show only at certain breakpoints */
@media (min-width: 641px) {
  .tecko-show-sm-only { display: none !important; }
}

@media (min-width: 769px) {
  .tecko-show-md-only { display: none !important; }
}

/* Responsive grid overrides */
@media (max-width: 768px) {
  .tecko-grid-cols-2,
  .tecko-grid-cols-3,
  .tecko-grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tecko-grid-cols-3,
  .tecko-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   ICON SIZING
   ========================================================================== */

.icon-xs  { font-size: 14px; }
.icon-sm  { font-size: 16px; }
.icon-md  { font-size: 20px; }
.icon-lg  { font-size: 24px; }
.icon-xl  { font-size: 32px; }
.icon-2xl { font-size: 48px; }