/* ============================================================
   UTILITIES.CSS — Single-purpose utility classes (Layer U)
   Immutable, atomic. Never composed with each other.
   All values via token references.
   ============================================================ */

/* Ensure [hidden] attribute always wins over author display rules */
[hidden] { display: none !important; }

/* ----------------------------------------------------------
   COLOUR UTILITIES
   ---------------------------------------------------------- */

.color-primary   { color: var(--text-primary); }
.color-muted     { color: var(--text-secondary); }
.color-dim       { color: var(--text-muted); }
.color-amber     { color: var(--amber); }
.color-green     { color: var(--green); }
.color-red       { color: var(--red); }

/* Shorthand accent colour — matches landing convention */
.u-acc { color: var(--amber); }

/* ----------------------------------------------------------
   TYPOGRAPHY UTILITIES
   ---------------------------------------------------------- */

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

.text-xs   { font-size: var(--step--1); }
.text-sm   { font-size: var(--step-0); }
.text-lg   { font-size: var(--step-1); }
.text-xl   { font-size: var(--step-2); }
.text-2xl  { font-size: var(--step-3); }
.text-3xl  { font-size: var(--step-4); }

.weight-light    { font-weight: 300; }
.weight-medium   { font-weight: 500; }
.weight-semibold { font-weight: 600; }

.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.italic    { font-style: italic; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

/* ----------------------------------------------------------
   SPACING UTILITIES
   ---------------------------------------------------------- */

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }

.pt-4  { padding-top: var(--space-4); }
.pb-4  { padding-bottom: var(--space-4); }

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

/* ----------------------------------------------------------
   BORDER UTILITIES
   ---------------------------------------------------------- */

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

/* ----------------------------------------------------------
   LAYOUT UTILITIES
   ---------------------------------------------------------- */

.w-full    { width: 100%; }
.flex-grow { flex-grow: 1; }

/* Screen-reader only / visually hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ----------------------------------------------------------
   FLOW UTILITY — body-text vertical rhythm
   ---------------------------------------------------------- */

.flow > * + * {
  margin-top: var(--flow-space, var(--space-4));
}

/* ----------------------------------------------------------
   RESPONSIVE VISIBILITY — viewport-width hide utilities
   Shared by app/public/auth shells. Breakpoints match the
   allowlist in the styling improvement plan.
   ---------------------------------------------------------- */

.u-hide-sm { display: revert; }
@media (max-width: 720px)  { .u-hide-sm { display: none !important; } }

.u-hide-md { display: revert; }
@media (max-width: 1180px) { .u-hide-md { display: none !important; } }

/* ----------------------------------------------------------
   CONDITIONAL VISIBILITY — per-personality show/hide
   CUBE CSS exceptions pattern: escaped colon in CSS selector,
   literal colon in HTML class attribute.
   ---------------------------------------------------------- */

[data-personality="clarity"]  .hide\:clarity  { display: none !important; }
[data-personality="momentum"] .hide\:momentum { display: none !important; }
[data-personality="flow"]     .hide\:flow     { display: none !important; }
[data-personality="bold"]     .hide\:bold     { display: none !important; }
[data-personality="zen"]      .hide\:zen      { display: none !important; }