/**
 * webfe Design System
 * Utilities: spacing, margins, padding, text, borders
 * Version 1.0
 */

/* ==================== SPACING SCALE (8px base) ==================== */
/* MARGINS */
.m-0 { margin: 0; }
.m-1 { margin: 0.5rem; }      /* 8px */
.m-2 { margin: 1rem; }        /* 16px */
.m-3 { margin: 1.5rem; }      /* 24px */
.m-4 { margin: 2rem; }        /* 32px */
.m-5 { margin: 2.5rem; }      /* 40px */
.m-6 { margin: 3rem; }        /* 48px */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mt-6 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mb-6 { margin-bottom: 3rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.5rem; }
.ml-2 { margin-left: 1rem; }
.ml-3 { margin-left: 1.5rem; }
.ml-4 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.5rem; }
.mr-2 { margin-right: 1rem; }
.mr-3 { margin-right: 1.5rem; }
.mr-4 { margin-right: 2rem; }
.mr-auto { margin-right: auto; }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* PADDING */
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }     /* 8px */
.p-2 { padding: 1rem; }       /* 16px */
.p-3 { padding: 1.5rem; }     /* 24px */
.p-4 { padding: 2rem; }       /* 32px */

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.5rem; }
.pl-2 { padding-left: 1rem; }
.pl-3 { padding-left: 1.5rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.5rem; }
.pr-2 { padding-right: 1rem; }
.pr-3 { padding-right: 1.5rem; }

/* ==================== WIDTH & HEIGHT ==================== */
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.max-w-100 {
  max-width: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

/* ==================== TEXT UTILITIES ==================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-bold { font-weight: 700; }
.text-semibold { font-weight: 600; }
.text-normal { font-weight: 400; }

.text-italic { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

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

.text-break {
  word-break: break-word;
  overflow-wrap: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* TEXT COLORS */
.text-primary { color: #fa8c00; }
.text-secondary { color: #4a4a4a; }
.text-muted { color: #757575; }
.text-success { color: #28a745; }
.text-danger { color: #e6524a; }
.text-warning { color: #ffc107; }
.text-info { color: #1e8c9e; }
.text-white { color: #fff; }
.text-dark { color: #1a1a1a; }

/* TEXT SIZES */
.text-sm { font-size: 0.875rem; }   /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */
.text-xl { font-size: 1.25rem; }    /* 20px */
.text-2xl { font-size: 1.5rem; }    /* 24px */
.text-3xl { font-size: 1.875rem; }  /* 30px */

/* ==================== BORDER UTILITIES ==================== */
.border {
  border: 1px solid #d3d3d3;
}

.border-top {
  border-top: 1px solid #d3d3d3;
}

.border-bottom {
  border-bottom: 1px solid #d3d3d3;
}

.border-left {
  border-left: 1px solid #d3d3d3;
}

.border-right {
  border-right: 1px solid #d3d3d3;
}

.border-none {
  border: none;
}

.border-0 { border: 0; }
.border-1 { border: 1px solid #d3d3d3; }
.border-2 { border: 2px solid #d3d3d3; }

.border-primary { border-color: #fa8c00; }
.border-danger { border-color: #e6524a; }
.border-success { border-color: #28a745; }

.rounded { border-radius: 4px; }
.rounded-0 { border-radius: 0; }
.rounded-1 { border-radius: 2px; }
.rounded-2 { border-radius: 4px; }
.rounded-3 { border-radius: 6px; }
.rounded-circle { border-radius: 50%; }

/* ==================== SHADOWS ==================== */
.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ==================== BACKGROUND COLORS ==================== */
.bg-white { background-color: #fff; }
.bg-light { background-color: #f5f5f5; }
.bg-dark { background-color: #1a1a1a; }
.bg-primary { background-color: #fa8c00; }
.bg-success { background-color: #28a745; }
.bg-danger { background-color: #e6524a; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #1e8c9e; }

.bg-success-light { background-color: #d4edda; }
.bg-danger-light { background-color: #f8d7da; }
.bg-warning-light { background-color: #fff3cd; }
.bg-info-light { background-color: #d1ecf1; }

/* ==================== OPACITY ==================== */
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ==================== OVERFLOW ==================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ==================== CURSOR ==================== */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-text { cursor: text; }

/* ==================== POSITION ==================== */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* ==================== TRANSFORM ==================== */
.rotate-0 { transform: rotate(0deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }

/* ==================== TRANSITIONS ==================== */
.transition-fast {
  transition: all 100ms ease;
}

.transition {
  transition: all 200ms ease;
}

.transition-slow {
  transition: all 300ms ease;
}

.no-transition {
  transition: none;
}

/* ==================== Z-INDEX ==================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ==================== RESPONSIVE HIDING ==================== */
@media (max-width: 576px) {
  .d-none-sm { display: none; }
  .d-block-sm { display: block; }
  .d-flex-sm { display: flex; }
}

@media (min-width: 577px) and (max-width: 768px) {
  .d-none-md { display: none; }
  .d-block-md { display: block; }
}

@media (min-width: 769px) {
  .d-none-lg { display: none; }
  .d-block-lg { display: block; }
}

/* ==================== ICONS ==================== */
.icon {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* Icon color utilities */
.icon.text-primary { color: #fa8c00; }
.icon.text-secondary { color: #6c757d; }
.icon.text-muted { color: #999; }
.icon.text-success { color: #28a745; }
.icon.text-danger { color: #e6524a; }
.icon.text-warning { color: #ffc107; }
.icon.text-info { color: #1e8c9e; }
.icon.text-white { color: #fff; }
.icon.text-dark { color: #1a1a2e; }

/* Icon sizing — pair with component size prop */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* Icon with spacing after text (inline usage) */
.icon-inline {
  margin-right: 0.5rem;
}