/* CUBE CSS - Utility Layer
   Single-purpose, composable helper classes
   Based on semantic tokens from variables.css
*/

/* ========================================
   FLOW UTILITY - Vertical Rhythm
   ======================================== */

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-md));
}

/* Spacing Modifiers - adjust --flow-space */
.space-xxs { --flow-space: var(--space-xxs); }
.space-xs { --flow-space: var(--space-xs); }
.space-sm { --flow-space: var(--space-sm); }
.space-md { --flow-space: var(--space-md); }
.space-lg { --flow-space: var(--space-lg); }
.space-xl { --flow-space: var(--space-xl); }
.space-xxl { --flow-space: var(--space-xxl); }


/* ========================================
   TEXT UTILITIES
   ======================================== */

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font Families */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-logo { font-family: var(--font-logo); }

/* Font Sizes */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-xxl { font-size: var(--fs-xxl); }
.text-hero { font-size: var(--fs-hero); }

/* Font Weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }
.text-accent-green { color: var(--text-accent-green); }
.text-on-dark { color: var(--text-on-dark); }

/* Text Decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* Line Height */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.75; }


/* ========================================
   BACKGROUND UTILITIES
   ======================================== */

.bg-body { background-color: var(--bg-body); }
.bg-card { background-color: var(--bg-card); }
.bg-surface { background-color: var(--bg-surface-elevated); }
.bg-hover { background-color: var(--bg-hover); }
.bg-active { background-color: var(--bg-active); }


/* ========================================
   BORDER UTILITIES
   ======================================== */

.border { border: 1px solid var(--border-default); }
.border-muted { border: 1px solid var(--border-muted); }
.border-focus { border: 2px solid var(--border-focus); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }


/* ========================================
   LAYOUT UTILITIES - Flexbox
   ======================================== */

.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; }

/* Alignment */
.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; }

/* Gap Utilities */
.gap-xxs { gap: var(--space-xxs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-xxl { gap: var(--space-xxl); }


/* ========================================
   LAYOUT UTILITIES - Grid
   ======================================== */

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

/* Grid Template Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ========================================
   SPACING UTILITIES - Margin & Padding
   ======================================== */

/* Margin All Sides */
.m-0 { margin: 0; }
.m-auto { margin: auto; }

/* Padding All Sides */
.p-xxs { padding: var(--space-xxs); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

/* Padding Block (top & bottom) */
.py-xxs { padding-block: var(--space-xxs); }
.py-xs { padding-block: var(--space-xs); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }
.py-xxl { padding-block: var(--space-xxl); }

/* Padding Inline (left & right) */
.px-xxs { padding-inline: var(--space-xxs); }
.px-xs { padding-inline: var(--space-xs); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.px-xl { padding-inline: var(--space-xl); }
.px-xxl { padding-inline: var(--space-xxl); }


/* ========================================
   DISPLAY UTILITIES
   ======================================== */

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

/* Visibility */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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


/* ========================================
   POSITION UTILITIES
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }


/* ========================================
   OVERFLOW UTILITIES
   ======================================== */

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


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

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-glow-magenta { box-shadow: var(--shadow-glow-magenta); }
.shadow-glow-green { box-shadow: var(--shadow-glow-green); }
.shadow-none { box-shadow: none; }


.user-input {
  color: var(--text-on-dark);
  background-color: var(--bg-surface-muted);
  border: 2px solid var(--border-muted);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}

.user-input:hover {
  border: 2px solid var(--border-hover);
}

.user-input::selection {
  background-color: var(--bg-hover);
}

.user-input:focus {
  background-color: hsl(var(--clr-magenta-400) / 0.5);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow-magenta);
  outline: none;
  color: var(--text-accent);
}

.btn-action {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  background-color: hsl(var(--clr-coral-500) / 0.75);
  padding: var(--space-xxs) var(--space-sm);
}

/* ========================================
   TRANSITION UTILITIES
   ======================================== */

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }


/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */

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

/* Max Width */
.max-w-prose { max-width: 65ch; }
.max-w-screen { max-width: 100vw; }


/* ========================================
   CURSOR UTILITIES
   ======================================== */

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


/* ========================================
   POINTER EVENTS
   ======================================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ========================================
   SCROLLBAR UTILITIES
   ======================================== */

.scroll-thin {
  overflow-y: auto;
  flex-grow: 1;
  padding-inline-end: var(--space-md); 

  /* scrollbar-width: thin; */ /* uncommenting this makes scrollbars gray in Safari */
  
  /* Stable gutter prevents layout shift when scrollbar appears */
  scrollbar-gutter: stable;
}

/* Firefox-specific override to get the thin bar back 
   Safari/Chrome will ignore this block entirely. */
@supports (-moz-appearance: none) {
  .scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) transparent; /* Transparent track = floating look */
  }
}

.scroll-thin::-webkit-scrollbar {
  width: 6px;
}

.scroll-thin::-webkit-scrollbar-track {
  background: transparent; /* Floating look for Webkit */
}

.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: var(--radius-pill);
  
  border: 1px solid transparent;
  background-clip: content-box;
}