/*
 * Cortex Utilities
 * Single-purpose utility classes (highest layer priority)
 * Inspired by CSS Zero
 */

@layer utilities {
  /* ==========================================================================
     Flex
     ========================================================================== */

  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .inline-flex { display: inline-flex; }

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

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

  .flex-1 { flex: 1; }
  .flex-grow { flex-grow: 1; }
  .flex-shrink-0 { flex-shrink: 0; }

  .self-start { align-self: start; }
  .self-end { align-self: end; }
  .self-center { align-self: center; }

  .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-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }

  /* ==========================================================================
     Text
     ========================================================================== */

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

  .uppercase { text-transform: uppercase; }
  .capitalize { text-transform: capitalize; }
  .lowercase { text-transform: lowercase; }

  .whitespace-nowrap { white-space: nowrap; }
  .break-words { overflow-wrap: break-word; }
  .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

  .leading-none { line-height: var(--leading-none); }
  .leading-tight { line-height: var(--leading-tight); }
  .leading-normal { line-height: var(--leading-normal); }

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

  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-3xl { font-size: var(--text-3xl); }

  /* Semantic text colors */
  .text-ink { color: var(--color-ink); }
  .text-muted { color: var(--color-ink-muted); }
  .text-faint { color: var(--color-ink-faint); }
  .text-positive { color: var(--color-positive); }
  .text-negative { color: var(--color-negative); }
  .text-warning { color: var(--color-warning); }
  .text-link { color: var(--color-link); }

  /* Semantic aliases (Bootstrap-style names) */
  .text-success { color: var(--color-positive); }
  .text-danger { color: var(--color-negative); }
  .text-info { color: var(--color-info); }

  /* ==========================================================================
     Background
     ========================================================================== */

  .bg-canvas { background-color: var(--color-canvas); }
  .bg-surface { background-color: var(--color-surface); }
  .bg-surface-raised { background-color: var(--color-surface-raised); }
  .bg-border-muted { background-color: var(--color-border-muted); }
  .bg-selected { background-color: var(--color-selected); }
  .bg-highlight { background-color: var(--color-highlight); }
  .bg-transparent { background-color: transparent; }

  /* ==========================================================================
     Border
     ========================================================================== */

  .border { border: 1px solid var(--color-border); }
  .border-0 { border-width: 0; }
  .border-t { border-block-start: 1px solid var(--color-border); }
  .border-b { border-block-end: 1px solid var(--color-border); }
  .border-muted { border-color: var(--color-border-muted); }
  .border-strong { border-color: var(--color-border-strong); }
  .border-comic { border: var(--border-thin) solid var(--color-comic-border); }

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

  /* ==========================================================================
     Shadow
     ========================================================================== */

  .shadow-none { box-shadow: none; }
  .shadow-xs { box-shadow: var(--shadow-xs); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  /* ==========================================================================
     Layout
     ========================================================================== */

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

  .relative { position: relative; }
  .absolute { position: absolute; }
  .sticky { position: sticky; inset-block-start: 0; }

  .w-full { inline-size: 100%; }
  .w-fit { inline-size: fit-content; }
  .h-full { block-size: 100%; }
  .min-w-0 { min-inline-size: 0; }
  .max-h-64 { max-block-size: 16rem; }
  .max-h-96 { max-block-size: 24rem; }

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

  .object-cover { object-fit: cover; }
  .object-contain { object-fit: contain; }

  .aspect-square { aspect-ratio: 1; }

  /* ==========================================================================
     Margin
     ========================================================================== */

  .m-0 { margin: 0; }
  .m-auto { margin: auto; }
  .mx-auto { margin-inline: 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-6 { margin-block-start: var(--space-6); }
  .mt-8 { margin-block-start: var(--space-8); }

  .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-6 { margin-block-end: var(--space-6); }
  .mb-8 { margin-block-end: var(--space-8); }

  .ml-1 { margin-inline-start: var(--space-1); }
  .ml-2 { margin-inline-start: var(--space-2); }
  .ml-4 { margin-inline-start: var(--space-4); }
  .ml-auto { margin-inline-start: auto; }

  .mr-1 { margin-inline-end: var(--space-1); }
  .mr-2 { margin-inline-end: var(--space-2); }
  .mr-4 { margin-inline-end: var(--space-4); }
  .mr-auto { margin-inline-end: auto; }

  /* ==========================================================================
     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-6 { padding: var(--space-6); }
  .p-8 { padding: var(--space-8); }

  .px-1 { padding-inline: var(--space-1); }
  .px-2 { padding-inline: var(--space-2); }
  .px-3 { padding-inline: var(--space-3); }
  .px-4 { padding-inline: var(--space-4); }
  .px-6 { padding-inline: var(--space-6); }

  .py-1 { padding-block: var(--space-1); }
  .py-2 { padding-block: var(--space-2); }
  .py-3 { padding-block: var(--space-3); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }

  .pt-4 { padding-block-start: var(--space-4); }
  .pt-6 { padding-block-start: var(--space-6); }
  .pb-4 { padding-block-end: var(--space-4); }
  .pb-6 { padding-block-end: var(--space-6); }

  /* ==========================================================================
     Opacity
     ========================================================================== */

  .opacity-50 { opacity: var(--opacity-50); }
  .opacity-60 { opacity: var(--opacity-60); }
  .opacity-75 { opacity: var(--opacity-75); }

  /* ==========================================================================
     Cursor
     ========================================================================== */

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

  /* ==========================================================================
     Responsive Show/Hide
     ========================================================================== */

  .show\@sm, .show\@md, .show\@lg { display: none; }

  @media (width >= 40rem) {
    .show\@sm { display: flex; }
    .hide\@sm { display: none; }
  }

  @media (width >= 48rem) {
    .show\@md { display: flex; }
    .hide\@md { display: none; }
  }

  @media (width >= 64rem) {
    .show\@lg { display: flex; }
    .hide\@lg { display: none; }
  }

  /* ==========================================================================
     Accessibility
     ========================================================================== */

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}