/* ============================================================
   ChiroCode — Utilities
   Atomic helpers. Only use when a semantic class isn't appropriate.
   ============================================================ */

/* === TEXT SIZE === */
.cc-text-xs   { font-size: var(--cc-text-xs); }
.cc-text-sm   { font-size: var(--cc-text-sm); }
.cc-text-base { font-size: var(--cc-text-base); }
.cc-text-lg   { font-size: var(--cc-text-lg); }
.cc-text-xl   { font-size: var(--cc-text-xl); }
.cc-text-2xl  { font-size: var(--cc-text-2xl); }
.cc-text-3xl  { font-size: var(--cc-text-3xl); }
.cc-text-4xl  { font-size: var(--cc-text-4xl); }

/* === TEXT COLOR === */
.cc-text-primary   { color: var(--cc-text-primary); }
.cc-text-secondary { color: var(--cc-text-secondary); }
.cc-text-muted     { color: var(--cc-text-muted); }
.cc-text-brand     { color: var(--cc-text-brand); }
.cc-text-success   { color: var(--cc-text-success); }
.cc-text-error     { color: var(--cc-text-error); }
.cc-text-warning   { color: var(--cc-text-warning); }
.cc-text-inverse   { color: var(--cc-text-inverse); }

/* === FONT === */
.cc-font-body    { font-family: var(--cc-font-body); }
.cc-font-heading { font-family: var(--cc-font-heading); }
.cc-font-mono    { font-family: var(--cc-font-mono); }

/* === WEIGHT === */
.cc-weight-normal   { font-weight: var(--cc-weight-normal); }
.cc-weight-medium   { font-weight: var(--cc-weight-medium); }
.cc-weight-semibold { font-weight: var(--cc-weight-semibold); }
.cc-weight-bold     { font-weight: var(--cc-weight-bold); }

/* === TEXT ALIGN === */
.cc-text-center { text-align: center; }
.cc-text-left   { text-align: left; }
.cc-text-right  { text-align: right; }

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

/* === MARGIN === */
.cc-mt-1 { margin-top: var(--cc-space-1); }
.cc-mt-2 { margin-top: var(--cc-space-2); }
.cc-mt-3 { margin-top: var(--cc-space-3); }
.cc-mt-4 { margin-top: var(--cc-space-4); }
.cc-mt-5 { margin-top: var(--cc-space-5); }
.cc-mt-6 { margin-top: var(--cc-space-6); }
.cc-mt-8 { margin-top: var(--cc-space-8); }

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

.cc-ml-1 { margin-left: var(--cc-space-1); }
.cc-ml-2 { margin-left: var(--cc-space-2); }
.cc-ml-3 { margin-left: var(--cc-space-3); }
.cc-ml-4 { margin-left: var(--cc-space-4); }
.cc-ml-5 { margin-left: var(--cc-space-5); }
.cc-ml-6 { margin-left: var(--cc-space-6); }
.cc-ml-8 { margin-left: var(--cc-space-8); }

.cc-mr-1 { margin-right: var(--cc-space-1); }
.cc-mr-2 { margin-right: var(--cc-space-2); }
.cc-mr-3 { margin-right: var(--cc-space-3); }
.cc-mr-4 { margin-right: var(--cc-space-4); }
.cc-mr-5 { margin-right: var(--cc-space-5); }
.cc-mr-6 { margin-right: var(--cc-space-6); }
.cc-mr-8 { margin-right: var(--cc-space-8); }

/* === PADDING === */
.cc-p-1 { padding: var(--cc-space-1); }
.cc-p-2 { padding: var(--cc-space-2); }
.cc-p-3 { padding: var(--cc-space-3); }
.cc-p-4 { padding: var(--cc-space-4); }
.cc-p-5 { padding: var(--cc-space-5); }
.cc-p-6 { padding: var(--cc-space-6); }
.cc-p-8 { padding: var(--cc-space-8); }

.cc-px-1 { padding-left: var(--cc-space-1); padding-right: var(--cc-space-1); }
.cc-px-2 { padding-left: var(--cc-space-2); padding-right: var(--cc-space-2); }
.cc-px-3 { padding-left: var(--cc-space-3); padding-right: var(--cc-space-3); }
.cc-px-4 { padding-left: var(--cc-space-4); padding-right: var(--cc-space-4); }
.cc-px-5 { padding-left: var(--cc-space-5); padding-right: var(--cc-space-5); }
.cc-px-6 { padding-left: var(--cc-space-6); padding-right: var(--cc-space-6); }
.cc-px-8 { padding-left: var(--cc-space-8); padding-right: var(--cc-space-8); }

.cc-py-1 { padding-top: var(--cc-space-1); padding-bottom: var(--cc-space-1); }
.cc-py-2 { padding-top: var(--cc-space-2); padding-bottom: var(--cc-space-2); }
.cc-py-3 { padding-top: var(--cc-space-3); padding-bottom: var(--cc-space-3); }
.cc-py-4 { padding-top: var(--cc-space-4); padding-bottom: var(--cc-space-4); }
.cc-py-5 { padding-top: var(--cc-space-5); padding-bottom: var(--cc-space-5); }
.cc-py-6 { padding-top: var(--cc-space-6); padding-bottom: var(--cc-space-6); }
.cc-py-8 { padding-top: var(--cc-space-8); padding-bottom: var(--cc-space-8); }

/* === DISPLAY === */
.cc-flex        { display: flex; }
.cc-inline-flex { display: inline-flex; }
.cc-flex-col    { display: flex; flex-direction: column; }
.cc-block       { display: block; }
.cc-inline      { display: inline; }
.cc-hidden      { display: none; }

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

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

.cc-flex-wrap { flex-wrap: wrap; }
.cc-flex-1    { flex: 1 1 0%; }

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

/* === GRID === */
.cc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cc-space-6);
}

.cc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cc-space-6);
}

.cc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cc-space-6);
}

/* === WIDTH === */
.cc-w-full    { width: 100%; }
.cc-w-auto    { width: auto; }
.cc-max-w-sm  { max-width: 640px; }
.cc-max-w-md  { max-width: 768px; }
.cc-max-w-lg  { max-width: 1024px; }
.cc-max-w-xl  { max-width: 1280px; }

@media (max-width: 768px) {
    .cc-grid-2,
    .cc-grid-3,
    .cc-grid-4 {
        grid-template-columns: 1fr;
    }
}