/* ===========================================================================
   RowLink — Utilities
   Depends on: tokens.css, base.css, layout.css, components.css
   Sprint 02 — Design System & Frontend Foundation

   Only semantic utility classes — NO raw-hex utilities. If you find yourself
   reaching for a raw colour utility, define a semantic alias first.

   Each utility uses `var(--rl-*)` exclusively.
   =========================================================================== */

/* -----------------------------------------------------------------
   Margin & padding (4-px scale)
   ----------------------------------------------------------------- */

.rl-m-0  { margin: 0; }
.rl-mt-0 { margin-top: 0; }
.rl-mb-0 { margin-bottom: 0; }
.rl-ml-0 { margin-left: 0; }
.rl-mr-0 { margin-right: 0; }

.rl-mt-1 { margin-top: var(--rl-space-1); }
.rl-mt-2 { margin-top: var(--rl-space-2); }
.rl-mt-3 { margin-top: var(--rl-space-3); }
.rl-mt-4 { margin-top: var(--rl-space-4); }
.rl-mt-5 { margin-top: var(--rl-space-5); }
.rl-mt-6 { margin-top: var(--rl-space-6); }
.rl-mt-7 { margin-top: var(--rl-space-7); }
.rl-mt-8 { margin-top: var(--rl-space-8); }
.rl-mt-9 { margin-top: var(--rl-space-9); }
.rl-mt-10 { margin-top: var(--rl-space-10); }

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

.rl-mx-3 { margin-inline: var(--rl-space-3); }
.rl-mx-5 { margin-inline: var(--rl-space-5); }
.rl-my-3 { margin-block: var(--rl-space-3); }
.rl-my-5 { margin-block: var(--rl-space-5); }
.rl-my-7 { margin-block: var(--rl-space-7); }

.rl-p-0 { padding: 0; }
.rl-p-3 { padding: var(--rl-space-3); }
.rl-p-4 { padding: var(--rl-space-4); }
.rl-p-5 { padding: var(--rl-space-5); }
.rl-p-7 { padding: var(--rl-space-7); }

.rl-px-3 { padding-inline: var(--rl-space-3); }
.rl-px-5 { padding-inline: var(--rl-space-5); }
.rl-py-3 { padding-block: var(--rl-space-3); }
.rl-py-5 { padding-block: var(--rl-space-5); }
.rl-py-7 { padding-block: var(--rl-space-7); }

/* -----------------------------------------------------------------
   Flex helpers
   ----------------------------------------------------------------- */

.rl-flex { display: flex; }
.rl-flex--col { flex-direction: column; }
.rl-flex--wrap { flex-wrap: wrap; }
.rl-flex--center { align-items: center; justify-content: center; }
.rl-flex--baseline { align-items: baseline; }
.rl-flex--start { align-items: flex-start; }
.rl-flex--end { align-items: flex-end; }

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

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

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

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

/* -----------------------------------------------------------------
   Text alignment + colour (semantic names only)
   ----------------------------------------------------------------- */

.rl-text-left { text-align: left; }
.rl-text-center { text-align: center; }
.rl-text-right { text-align: right; }
.rl-text-pretty { text-wrap: pretty; }
.rl-text-balance { text-wrap: balance; }
.rl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rl-fs-xs    { font-size: var(--rl-fs-caption); }
.rl-fs-sm    { font-size: var(--rl-fs-secondary); }
.rl-fs-base  { font-size: var(--rl-fs-body); }
.rl-fs-lg    { font-size: var(--rl-fs-h3-card); }

.rl-fw-regular { font-weight: var(--rl-fw-regular); }
.rl-fw-medium  { font-weight: var(--rl-fw-medium); }
.rl-fw-semi    { font-weight: var(--rl-fw-semi); }
.rl-fw-bold    { font-weight: var(--rl-fw-bold); }
.rl-fw-extra   { font-weight: var(--rl-fw-extra); }
.rl-fw-black   { font-weight: var(--rl-fw-black); }

.rl-lh-tight { line-height: var(--rl-lh-body-tight); }
.rl-lh-body  { line-height: var(--rl-lh-body); }
.rl-lh-loose { line-height: var(--rl-lh-secondary); }

/* Color (semantic only) */
.rl-c-text           { color: var(--rl-color-text-primary); }
.rl-c-text-secondary { color: var(--rl-color-text-secondary); }
.rl-c-text-muted     { color: var(--rl-color-text-muted); }
.rl-c-link           { color: var(--rl-color-link); }
.rl-c-error          { color: var(--rl-color-error); }
.rl-c-warning        { color: var(--rl-color-warning); }
.rl-c-success        { color: var(--rl-color-success); }
.rl-c-on-dark        { color: var(--rl-color-text-on-dark); }

/* Dark surface utility (use only as a layout hint, not as a colour). */
.rl-surface-dark { background: var(--rl-color-surface-dark); color: var(--rl-color-text-on-dark); }

/* -----------------------------------------------------------------
   Display + visibility
   ----------------------------------------------------------------- */

.rl-hidden { display: none !important; }
.rl-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;
}

.rl-block { display: block; }
.rl-inline-block { display: inline-block; }
.rl-inline { display: inline; }
.rl-grid { display: grid; }
.rl-grid--inline { display: inline-grid; }

/* Responsive display helpers (mobile-first). */
@media (min-width: 576px) {
  .rl-d-sm-block   { display: block; }
  .rl-d-sm-flex    { display: flex; }
  .rl-d-sm-none    { display: none !important; }
}
@media (min-width: 768px) {
  .rl-d-md-block   { display: block; }
  .rl-d-md-flex    { display: flex; }
  .rl-d-md-none    { display: none !important; }
}
@media (min-width: 992px) {
  .rl-d-lg-block   { display: block; }
  .rl-d-lg-flex    { display: flex; }
  .rl-d-lg-none    { display: none !important; }
}
@media (min-width: 1200px) {
  .rl-d-xl-block   { display: block; }
  .rl-d-xl-flex    { display: flex; }
  .rl-d-xl-none    { display: none !important; }
}

@media (max-width: 575.98px) { .rl-d-xs-down-none { display: none !important; } }
@media (max-width: 767.98px) { .rl-d-sm-down-none { display: none !important; } }
@media (max-width: 991.98px) { .rl-d-md-down-none { display: none !important; } }

/* -----------------------------------------------------------------
   Width / max-width
   ----------------------------------------------------------------- */

.rl-w-full { width: 100%; }
.rl-w-max-content { width: max-content; }
.rl-min-w-0 { min-width: 0; }
.rl-max-w-narrow  { max-width: var(--rl-content-narrow); }
.rl-max-w-hero    { max-width: var(--rl-content-hero); }
.rl-max-w-profile { max-width: var(--rl-content-profile); }
.rl-max-w-search  { max-width: var(--rl-content-search); }
.rl-max-w-landing { max-width: var(--rl-content-landing); }

/* -----------------------------------------------------------------
   Position helpers
   ----------------------------------------------------------------- */

.rl-relative { position: relative; }
.rl-absolute { position: absolute; }
.rl-sticky   { position: sticky; }
.rl-fixed    { position: fixed; }
.rl-inset-0  { inset: 0; }

/* -----------------------------------------------------------------
   Background (semantic only)
   ----------------------------------------------------------------- */

.rl-bg-surface        { background: var(--rl-color-surface); }
.rl-bg-surface-hover  { background: var(--rl-color-surface-hover); }
.rl-bg-bg             { background: var(--rl-color-bg); }
.rl-bg-dark           { background: var(--rl-color-surface-dark); }
.rl-bg-accent         { background: var(--rl-color-accent-bg); }
.rl-bg-transparent    { background: transparent; }

/* -----------------------------------------------------------------
   Border helpers
   ----------------------------------------------------------------- */

.rl-border          { border: 1px solid var(--rl-color-border); }
.rl-border-strong   { border: 1.5px solid var(--rl-color-border-strong); }
.rl-border-t        { border-top: 1px solid var(--rl-color-accent-bg); }
.rl-border-b        { border-bottom: 1px solid var(--rl-color-border); }
.rl-border-l        { border-left: 1px solid var(--rl-color-border); }
.rl-border-mint     { border: 1px solid var(--rl-color-accent-border); }
.rl-border-dashed   { border-style: dashed; }

.rl-rounded-sm      { border-radius: var(--rl-radius-3); }
.rl-rounded         { border-radius: var(--rl-radius-4); }
.rl-rounded-md      { border-radius: var(--rl-radius-5); }
.rl-rounded-lg      { border-radius: var(--rl-radius-7); }
.rl-rounded-pill    { border-radius: var(--rl-radius-pill); }
.rl-rounded-circle  { border-radius: var(--rl-radius-circle); }

/* -----------------------------------------------------------------
   Cursor + user-select
   ----------------------------------------------------------------- */

.rl-cursor-pointer { cursor: pointer; }
.rl-cursor-not-allowed { cursor: not-allowed; }
.rl-select-none { user-select: none; }

/* -----------------------------------------------------------------
   Truncation & overflow
   ----------------------------------------------------------------- */

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

/* -----------------------------------------------------------------
   Print helpers
   ----------------------------------------------------------------- */

@media print {
  .rl-d-print-none { display: none !important; }
  .rl-d-print-block { display: block !important; }
}