/*
 * utilities.css
 * Single-purpose utility classes derived from tokens.css.
 * Generated from the token set — do not add one-off values here.
 *
 * Load order: tokens.css → base.css → utilities.css → components.css
 *
 * AI composition rule:
 *   Compose with utilities first.
 *   Write a component class only when 3+ utilities repeat together 3+ times.
 *
 * Naming convention:
 *   Property shorthand — value name
 *   e.g. text-primary, bg-surface, p-4, radius-md, flex-col
 *
 * Responsive prefix: sm: md: lg: xl:
 *   e.g. class="grid-1 md:grid-2 lg:grid-3"
 *
 * Sections:
 *   1.  Display & visibility
 *   2.  Flexbox
 *   3.  Grid
 *   4.  Spacing — padding
 *   5.  Spacing — margin
 *   6.  Spacing — gap
 *   7.  Sizing
 *   8.  Typography
 *   9.  Color — text
 *  10.  Color — background
 *  11.  Color — border
 *  12.  Borders
 *  13.  Border radius
 *  14.  Layout helpers
 *  15.  Overflow & position
 *  16.  Transitions
 *  17.  Responsive variants
 */


/* ─── 1. Display & visibility ─────────────────────────────────────────────── */

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

.visible   { visibility: visible; }
.invisible { visibility: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ─── 2. Flexbox ──────────────────────────────────────────────────────────── */

.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.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; }
.items-baseline { align-items: baseline; }

.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; }
.self-stretch { align-self: stretch; }

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


/* ─── 3. Grid ─────────────────────────────────────────────────────────────── */

.grid-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

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


/* ─── 4. Spacing — 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); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }

.px-0  { padding-inline: 0; }
.px-2  { padding-inline: var(--space-2); }
.px-3  { padding-inline: var(--space-3); }
.px-4  { padding-inline: var(--space-4); }
.px-5  { padding-inline: var(--space-5); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }
.px-10 { padding-inline: var(--space-10); }
.px-12 { padding-inline: var(--space-12); }
.px-16 { padding-inline: var(--space-16); }

.py-0  { padding-block: 0; }
.py-2  { padding-block: var(--space-2); }
.py-3  { padding-block: var(--space-3); }
.py-4  { padding-block: var(--space-4); }
.py-5  { padding-block: var(--space-5); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

.pt-4  { padding-block-start: var(--space-4); }
.pt-6  { padding-block-start: var(--space-6); }
.pt-8  { padding-block-start: var(--space-8); }
.pt-12 { padding-block-start: var(--space-12); }
.pt-16 { padding-block-start: var(--space-16); }

.pb-4  { padding-block-end: var(--space-4); }
.pb-6  { padding-block-end: var(--space-6); }
.pb-8  { padding-block-end: var(--space-8); }
.pb-12 { padding-block-end: var(--space-12); }
.pb-16 { padding-block-end: var(--space-16); }


/* ─── 5. Spacing — margin ─────────────────────────────────────────────────── */

.m-0    { margin: 0; }
.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }
.m-auto  { margin: auto; }

.mt-0  { margin-block-start: 0; }
.mt-1  { margin-block-start: var(--space-1); }
.mt-2  { margin-block-start: var(--space-2); }
.mt-3  { margin-block-start: var(--space-3); }
.mt-4  { margin-block-start: var(--space-4); }
.mt-5  { margin-block-start: var(--space-5); }
.mt-6  { margin-block-start: var(--space-6); }
.mt-8  { margin-block-start: var(--space-8); }
.mt-10 { margin-block-start: var(--space-10); }
.mt-12 { margin-block-start: var(--space-12); }
.mt-16 { margin-block-start: var(--space-16); }

.mb-0  { margin-block-end: 0; }
.mb-1  { margin-block-end: var(--space-1); }
.mb-2  { margin-block-end: var(--space-2); }
.mb-3  { margin-block-end: var(--space-3); }
.mb-4  { margin-block-end: var(--space-4); }
.mb-5  { margin-block-end: var(--space-5); }
.mb-6  { margin-block-end: var(--space-6); }
.mb-8  { margin-block-end: var(--space-8); }
.mb-10 { margin-block-end: var(--space-10); }
.mb-12 { margin-block-end: var(--space-12); }
.mb-16 { margin-block-end: var(--space-16); }


/* ─── 6. Spacing — gap ────────────────────────────────────────────────────── */

.gap-0  { gap: 0; }
.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); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

.gap-x-2  { column-gap: var(--space-2); }
.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }

.gap-y-2  { row-gap: var(--space-2); }
.gap-y-4  { row-gap: var(--space-4); }
.gap-y-6  { row-gap: var(--space-6); }
.gap-y-8  { row-gap: var(--space-8); }


/* ─── 7. Sizing ───────────────────────────────────────────────────────────── */

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.h-screen { height: 100dvh; }
.min-h-screen { min-height: 100dvh; }

.max-w-text    { max-width: var(--max-width-text); }
.max-w-content { max-width: var(--max-width-content); }
.max-w-wide    { max-width: var(--max-width-wide); }
.max-w-full    { max-width: 100%; }
.max-w-prose   { max-width: 75ch; }
.max-w-panel   { max-width: var(--max-width-panel); }

/* Touch target minimum */
.min-touch { min-height: 44px; min-width: 44px; }

/* Aspect ratios */
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }


/* ─── 8. Typography ───────────────────────────────────────────────────────── */

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-md   { font-size: var(--font-size-md); }
.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); }
.text-4xl  { font-size: var(--font-size-4xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-bold    { font-weight: var(--font-weight-bold); }

.font-mono { font-family: var(--font-family-mono); }
.font-heading { font-family: var(--font-family-heading); }

/* Shift inline text/glyphs down slightly for optical alignment with adjacent copy */
.text-optical-nudge {
  position: relative;
  top: var(--font-optical-nudge-y);
}

.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-tight  { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide   { letter-spacing: var(--letter-spacing-wide); }

.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; }
.normal-case  { text-transform: none; }

.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

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

.wrap-balance { text-wrap: balance; }
.wrap-pretty  { text-wrap: pretty; }
.whitespace-nowrap { white-space: nowrap; }

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


/* ─── 9. Color — text ─────────────────────────────────────────────────────── */

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-subtle    { color: var(--color-text-subtle); }
.text-disabled  { color: var(--color-text-disabled); }
.text-inverse   { color: var(--color-text-inverse); }
.text-link      { color: var(--color-text-link); }

.text-info      { color: var(--color-info-text); }
.text-success   { color: var(--color-success-text); }
.text-warning   { color: var(--color-warning-text); }
.text-danger    { color: var(--color-danger-text); }


/* ─── 10. Color — background ──────────────────────────────────────────────── */

.bg-page        { background-color: var(--color-bg-page); }
.bg-surface     { background-color: var(--color-bg-surface); }
.bg-sunken      { background-color: var(--color-bg-sunken); }

.bg-info        { background-color: var(--color-info-bg); }
.bg-success     { background-color: var(--color-success-bg); }
.bg-warning     { background-color: var(--color-warning-bg); }
.bg-danger      { background-color: var(--color-danger-bg); }

.bg-interactive { background-color: var(--color-interactive-primary); }
.bg-transparent { background-color: transparent; }
.bg-site-title-panel { background-color: var(--color-bg-site-title-panel); }


/* ─── 11. Color — border ──────────────────────────────────────────────────── */

.border-color-default { border-color: var(--color-border-default); }
.border-color-strong  { border-color: var(--color-border-strong); }
.border-color-focus   { border-color: var(--color-border-focus); }

.border-color-info    { border-color: var(--color-info-border); }
.border-color-success { border-color: var(--color-success-border); }
.border-color-warning { border-color: var(--color-warning-border); }
.border-color-danger  { border-color: var(--color-danger-border); }
.border-color-white   { border-color: var(--color-border-white); }
.border-color-site-title-panel { border-color: var(--color-border-site-title-panel); }


/* ─── 12. Borders ─────────────────────────────────────────────────────────── */

.border       { border: 1px solid var(--color-border-default); }
.border-strong { border: 1px solid var(--color-border-strong); }
.border-white  { border: 1px solid var(--color-border-white); }
.border-site-title-panel { border: 1px solid var(--color-border-site-title-panel); }
.border-none  { border: none; }

.border-t { border-block-start: 1px solid var(--color-border-default); }
.border-b { border-block-end: 1px solid var(--color-border-default); }
.border-l { border-inline-start: 1px solid var(--color-border-default); }
.border-r { border-inline-end: 1px solid var(--color-border-default); }

.border-l-accent { border-inline-start: 3px solid var(--color-interactive-primary); border-radius: 0; }
.border-l-info    { border-inline-start: 3px solid var(--color-info-icon);    border-radius: 0; }
.border-l-success { border-inline-start: 3px solid var(--color-success-icon); border-radius: 0; }
.border-l-warning { border-inline-start: 3px solid var(--color-warning-icon); border-radius: 0; }
.border-l-danger  { border-inline-start: 3px solid var(--color-danger-icon);  border-radius: 0; }


/* ─── 13. Border radius ───────────────────────────────────────────────────── */

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


/* ─── 14. Layout helpers ──────────────────────────────────────────────────── */

/* Page wrapper — responsive horizontal gutters */
.page-wrapper {
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px)  { .page-wrapper { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1440px) { .page-wrapper { padding-inline: var(--gutter-desktop); } }
@media (min-width: 1920px) { .page-wrapper { padding-inline: var(--gutter-wide); } }

/* Container — max-width + centered */
.container         { width: 100%; max-width: var(--max-width-content); margin-inline: auto; }
.container-text    { width: 100%; max-width: var(--max-width-text);    margin-inline: auto; }
.container-wide    { width: 100%; max-width: var(--max-width-wide);    margin-inline: auto; }

/* Section vertical rhythm */
.section    { padding-block: var(--space-12); }
.section-sm { padding-block: var(--space-8); }
.section-lg { padding-block: var(--space-16); }
@media (min-width: 768px) {
  .section    { padding-block: var(--space-16); }
  .section-lg { padding-block: calc(var(--space-16) * 1.5); }
}

/* Divider */
.divider   { border: none; border-block-start: 1px solid var(--color-border-default); }
.divider-v { border: none; border-inline-start: 1px solid var(--color-border-default); align-self: stretch; }

/* Stack — vertical flex with gap (most common pattern) */
.stack    { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2  { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-6  { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-8  { display: flex; flex-direction: column; gap: var(--space-8); }

/* Cluster — horizontal flex that wraps */
.cluster   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster-2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-6 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

/* Center — flex centering shorthand */
.center { display: flex; align-items: center; justify-content: center; }


/* ─── 15. Overflow & position ─────────────────────────────────────────────── */

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

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.top-0    { top: 0; }
.z-10     { z-index: 10; }
.z-100    { z-index: 100; }

/* Object fit */
.object-cover   { object-fit: cover; object-position: center; }
.object-contain { object-fit: contain; }

/* Pointer */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.select-none    { user-select: none; -webkit-user-select: none; }


/* ─── 16. Transitions ─────────────────────────────────────────────────────── */

.transition         { transition: all 0.15s ease; }
.transition-colors  { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-opacity { transition: opacity 0.15s ease; }
.transition-transform { transition: transform 0.15s ease; }
.transition-none    { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition-colors,
  .transition-opacity,
  .transition-transform { transition: none; }
}

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


/* ─── 17. Responsive variants ─────────────────────────────────────────────── */
/*
 * Prefix classes with sm:, md:, lg:, xl: for breakpoint-specific overrides.
 * Add the prefix class alongside the base class in HTML:
 *   <div class="grid-1 md:grid-2 lg:grid-3">
 *
 * Only the most commonly needed responsive variants are included.
 * Add more as needed — follow the same pattern.
 */

/* sm: — tablet 768px */
@media (min-width: 768px) {
  .md\:hidden       { display: none; }
  .md\:block        { display: block; }
  .md\:flex         { display: flex; }
  .md\:grid         { display: grid; }
  .md\:grid-1       { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex-row     { flex-direction: row; }
  .md\:flex-col     { flex-direction: column; }
  .md\:text-left    { text-align: left; }
  .md\:text-center  { text-align: center; }
  .md\:w-full       { width: 100%; }
  .md\:w-auto       { width: auto; }
  .md\:p-8          { padding: var(--space-8); }
  .md\:px-8         { padding-inline: var(--space-8); }
  .md\:py-8         { padding-block: var(--space-8); }
  .md\:gap-6        { gap: var(--space-6); }
  .md\:gap-8        { gap: var(--space-8); }
}

/* lg: — desktop 1440px */
@media (min-width: 1440px) {
  .lg\:hidden       { display: none; }
  .lg\:block        { display: block; }
  .lg\:flex         { display: flex; }
  .lg\:grid         { display: grid; }
  .lg\:grid-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:flex-row     { flex-direction: row; }
  .lg\:flex-col     { flex-direction: column; }
  .lg\:text-left    { text-align: left; }
  .lg\:p-12         { padding: var(--space-12); }
  .lg\:px-12        { padding-inline: var(--space-12); }
  .lg\:py-12        { padding-block: var(--space-12); }
  .lg\:gap-8        { gap: var(--space-8); }
  .lg\:gap-12       { gap: var(--space-12); }
}

/* xl: — wide 1920px */
@media (min-width: 1920px) {
  .xl\:grid-4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-5       { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:gap-16       { gap: var(--space-16); }
  .xl\:px-16        { padding-inline: var(--space-16); }
}