/* ============================================================
   REFORCE CHIPS — Base Typography & Utility Classes
   ============================================================ */

/* ── Body baseline ── */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-gray-800);
  background-color: var(--color-gray-50);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

/* ── Links ── */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ── Code ── */
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-primary-dark);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.text-xs    { font-size: var(--font-size-xs); }
.text-sm    { font-size: var(--font-size-sm); }
.text-base  { font-size: var(--font-size-base); }
.text-lg    { font-size: var(--font-size-lg); }
.text-xl    { font-size: var(--font-size-xl); }
.text-2xl   { font-size: var(--font-size-2xl); }
.text-3xl   { font-size: var(--font-size-3xl); }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

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

.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.capitalize   { text-transform: capitalize; }

.italic       { font-style: italic; }

.leading-tight   { line-height: var(--line-height-tight); }
.leading-snug    { line-height: var(--line-height-snug); }
.leading-normal  { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

.tracking-wide   { letter-spacing: 0.05em; }
.tracking-wider  { letter-spacing: 0.08em; }
.tracking-widest { letter-spacing: 0.12em; }

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

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

/* ── Color utilities ── */
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error   { color: var(--color-error); }
.text-info    { color: var(--color-info); }
.text-muted   { color: var(--color-gray-500); }
.text-dark    { color: var(--color-gray-900); }
.text-white   { color: var(--color-white); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }

/* ── Background utilities ── */
.bg-primary       { background-color: var(--color-primary); }
.bg-white         { background-color: var(--color-white); }
.bg-gray-50       { background-color: var(--color-gray-50); }
.bg-gray-100      { background-color: var(--color-gray-100); }
.bg-primary-light { background-color: var(--color-primary-ultra-light); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

.flex-1      { flex: 1; }
.flex-auto   { flex: auto; }
.flex-none   { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow   { flex-grow: 1; }

.grid        { display: grid; }

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.col-gap-2 { column-gap: var(--space-2); }
.col-gap-4 { column-gap: var(--space-4); }
.row-gap-2 { row-gap: var(--space-2); }
.row-gap-4 { row-gap: var(--space-4); }

/* ── Sizing ── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.min-w-0 { min-width: 0; }

/* ── Positioning ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

.inset-0 { inset: 0; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ============================================================
   SPACING UTILITIES
   ============================================================ */

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

.mt-1 { margin-top:    var(--space-1); }
.mt-2 { margin-top:    var(--space-2); }
.mt-3 { margin-top:    var(--space-3); }
.mt-4 { margin-top:    var(--space-4); }
.mt-5 { margin-top:    var(--space-5); }
.mt-6 { margin-top:    var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.ml-1 { margin-left:   var(--space-1); }
.ml-2 { margin-left:   var(--space-2); }
.ml-3 { margin-left:   var(--space-3); }
.ml-4 { margin-left:   var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-1 { margin-right:  var(--space-1); }
.mr-2 { margin-right:  var(--space-2); }
.mr-3 { margin-right:  var(--space-3); }
.mr-4 { margin-right:  var(--space-4); }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

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

.pt-1 { padding-top:    var(--space-1); }
.pt-2 { padding-top:    var(--space-2); }
.pt-3 { padding-top:    var(--space-3); }
.pt-4 { padding-top:    var(--space-4); }

.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

.pl-1 { padding-left:   var(--space-1); }
.pl-2 { padding-left:   var(--space-2); }
.pl-3 { padding-left:   var(--space-3); }
.pl-4 { padding-left:   var(--space-4); }

.pr-1 { padding-right:  var(--space-1); }
.pr-2 { padding-right:  var(--space-2); }
.pr-3 { padding-right:  var(--space-3); }
.pr-4 { padding-right:  var(--space-4); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4);  padding-bottom: var(--space-4); }

/* ============================================================
   BORDER & RADIUS UTILITIES
   ============================================================ */

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

.border       { border: 1px solid var(--color-gray-200); }
.border-top   { border-top: 1px solid var(--color-gray-200); }
.border-bottom{ border-bottom: 1px solid var(--color-gray-200); }

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

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

/* ============================================================
   INTERACTIVE UTILITIES
   ============================================================ */

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

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

/* ── Transitions ── */
.transition        { transition: all var(--transition-base); }
.transition-fast   { transition: all var(--transition-fast); }
.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); }

/* ── Opacity ── */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100{ opacity: 1; }

/* ── Z-index ── */
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-50  { z-index: 50; }

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: var(--space-4) 0;
}

.divider-vertical {
  width: 1px;
  background: var(--color-gray-200);
  align-self: stretch;
  margin: 0 var(--space-3);
}

/* ── Visually hidden (accessible) ── */
.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;
}