/*
 * FCOS Utilities — Spacing, Layout & Visual Utility Classes
 * Usage: <link rel="stylesheet" href="fcos-utilities.css">
 * Pairs with fcos-ui.css for components and fcos-animate.css for motion.
 * Version: 1.0.0
 */

/* ========================================================================
   1. SPACING SCALE (4px base)
   ======================================================================== */

/* --- Padding --- */
.p-0  { padding: 0 }       .p-1  { padding: 4px }     .p-2  { padding: 8px }
.p-3  { padding: 12px }    .p-4  { padding: 16px }    .p-5  { padding: 20px }
.p-6  { padding: 24px }    .p-8  { padding: 32px }    .p-10 { padding: 40px }
.p-12 { padding: 48px }    .p-16 { padding: 64px }

.px-0  { padding-left: 0; padding-right: 0 }
.px-1  { padding-left: 4px; padding-right: 4px }
.px-2  { padding-left: 8px; padding-right: 8px }
.px-3  { padding-left: 12px; padding-right: 12px }
.px-4  { padding-left: 16px; padding-right: 16px }
.px-5  { padding-left: 20px; padding-right: 20px }
.px-6  { padding-left: 24px; padding-right: 24px }
.px-8  { padding-left: 32px; padding-right: 32px }
.px-10 { padding-left: 40px; padding-right: 40px }
.px-12 { padding-left: 48px; padding-right: 48px }
.px-16 { padding-left: 64px; padding-right: 64px }

.py-0  { padding-top: 0; padding-bottom: 0 }
.py-1  { padding-top: 4px; padding-bottom: 4px }
.py-2  { padding-top: 8px; padding-bottom: 8px }
.py-3  { padding-top: 12px; padding-bottom: 12px }
.py-4  { padding-top: 16px; padding-bottom: 16px }
.py-5  { padding-top: 20px; padding-bottom: 20px }
.py-6  { padding-top: 24px; padding-bottom: 24px }
.py-8  { padding-top: 32px; padding-bottom: 32px }
.py-10 { padding-top: 40px; padding-bottom: 40px }
.py-12 { padding-top: 48px; padding-bottom: 48px }
.py-16 { padding-top: 64px; padding-bottom: 64px }

.pt-0 { padding-top: 0 }     .pt-1 { padding-top: 4px }   .pt-2 { padding-top: 8px }
.pt-3 { padding-top: 12px }  .pt-4 { padding-top: 16px }  .pt-5 { padding-top: 20px }
.pt-6 { padding-top: 24px }  .pt-8 { padding-top: 32px }  .pt-10 { padding-top: 40px }
.pt-12 { padding-top: 48px } .pt-16 { padding-top: 64px }

.pr-0 { padding-right: 0 }     .pr-1 { padding-right: 4px }   .pr-2 { padding-right: 8px }
.pr-3 { padding-right: 12px }  .pr-4 { padding-right: 16px }  .pr-5 { padding-right: 20px }
.pr-6 { padding-right: 24px }  .pr-8 { padding-right: 32px }  .pr-10 { padding-right: 40px }
.pr-12 { padding-right: 48px } .pr-16 { padding-right: 64px }

.pb-0 { padding-bottom: 0 }     .pb-1 { padding-bottom: 4px }   .pb-2 { padding-bottom: 8px }
.pb-3 { padding-bottom: 12px }  .pb-4 { padding-bottom: 16px }  .pb-5 { padding-bottom: 20px }
.pb-6 { padding-bottom: 24px }  .pb-8 { padding-bottom: 32px }  .pb-10 { padding-bottom: 40px }
.pb-12 { padding-bottom: 48px } .pb-16 { padding-bottom: 64px }

.pl-0 { padding-left: 0 }     .pl-1 { padding-left: 4px }   .pl-2 { padding-left: 8px }
.pl-3 { padding-left: 12px }  .pl-4 { padding-left: 16px }  .pl-5 { padding-left: 20px }
.pl-6 { padding-left: 24px }  .pl-8 { padding-left: 32px }  .pl-10 { padding-left: 40px }
.pl-12 { padding-left: 48px } .pl-16 { padding-left: 64px }

/* --- Margin --- */
.m-0  { margin: 0 }       .m-1  { margin: 4px }     .m-2  { margin: 8px }
.m-3  { margin: 12px }    .m-4  { margin: 16px }    .m-5  { margin: 20px }
.m-6  { margin: 24px }    .m-8  { margin: 32px }    .m-10 { margin: 40px }
.m-12 { margin: 48px }    .m-16 { margin: 64px }
.m-auto { margin: auto }

.mx-0  { margin-left: 0; margin-right: 0 }
.mx-1  { margin-left: 4px; margin-right: 4px }
.mx-2  { margin-left: 8px; margin-right: 8px }
.mx-3  { margin-left: 12px; margin-right: 12px }
.mx-4  { margin-left: 16px; margin-right: 16px }
.mx-5  { margin-left: 20px; margin-right: 20px }
.mx-6  { margin-left: 24px; margin-right: 24px }
.mx-8  { margin-left: 32px; margin-right: 32px }
.mx-10 { margin-left: 40px; margin-right: 40px }
.mx-12 { margin-left: 48px; margin-right: 48px }
.mx-16 { margin-left: 64px; margin-right: 64px }
.mx-auto { margin-left: auto; margin-right: auto }

.my-0  { margin-top: 0; margin-bottom: 0 }
.my-1  { margin-top: 4px; margin-bottom: 4px }
.my-2  { margin-top: 8px; margin-bottom: 8px }
.my-3  { margin-top: 12px; margin-bottom: 12px }
.my-4  { margin-top: 16px; margin-bottom: 16px }
.my-5  { margin-top: 20px; margin-bottom: 20px }
.my-6  { margin-top: 24px; margin-bottom: 24px }
.my-8  { margin-top: 32px; margin-bottom: 32px }
.my-10 { margin-top: 40px; margin-bottom: 40px }
.my-12 { margin-top: 48px; margin-bottom: 48px }
.my-16 { margin-top: 64px; margin-bottom: 64px }

.mt-0 { margin-top: 0 }     .mt-1 { margin-top: 4px }   .mt-2 { margin-top: 8px }
.mt-3 { margin-top: 12px }  .mt-4 { margin-top: 16px }  .mt-5 { margin-top: 20px }
.mt-6 { margin-top: 24px }  .mt-8 { margin-top: 32px }  .mt-10 { margin-top: 40px }
.mt-12 { margin-top: 48px } .mt-16 { margin-top: 64px }

.mr-0 { margin-right: 0 }     .mr-1 { margin-right: 4px }   .mr-2 { margin-right: 8px }
.mr-3 { margin-right: 12px }  .mr-4 { margin-right: 16px }  .mr-5 { margin-right: 20px }
.mr-6 { margin-right: 24px }  .mr-8 { margin-right: 32px }  .mr-10 { margin-right: 40px }
.mr-12 { margin-right: 48px } .mr-16 { margin-right: 64px }

.mb-0 { margin-bottom: 0 }     .mb-1 { margin-bottom: 4px }   .mb-2 { margin-bottom: 8px }
.mb-3 { margin-bottom: 12px }  .mb-4 { margin-bottom: 16px }  .mb-5 { margin-bottom: 20px }
.mb-6 { margin-bottom: 24px }  .mb-8 { margin-bottom: 32px }  .mb-10 { margin-bottom: 40px }
.mb-12 { margin-bottom: 48px } .mb-16 { margin-bottom: 64px }

.ml-0 { margin-left: 0 }     .ml-1 { margin-left: 4px }   .ml-2 { margin-left: 8px }
.ml-3 { margin-left: 12px }  .ml-4 { margin-left: 16px }  .ml-5 { margin-left: 20px }
.ml-6 { margin-left: 24px }  .ml-8 { margin-left: 32px }  .ml-10 { margin-left: 40px }
.ml-12 { margin-left: 48px } .ml-16 { margin-left: 64px }

/* --- Gap --- */
.gap-0  { gap: 0 }       .gap-1  { gap: 4px }     .gap-2  { gap: 8px }
.gap-3  { gap: 12px }    .gap-4  { gap: 16px }    .gap-5  { gap: 20px }
.gap-6  { gap: 24px }    .gap-8  { gap: 32px }    .gap-10 { gap: 40px }
.gap-12 { gap: 48px }    .gap-16 { gap: 64px }

/* ========================================================================
   2. SIZING
   ======================================================================== */

.w-full    { width: 100% }
.w-half    { width: 50% }
.w-third   { width: 33.333% }
.w-quarter { width: 25% }
.w-auto    { width: auto }
.w-screen  { width: 100vw }

.h-full   { height: 100% }
.h-half   { height: 50% }
.h-screen { height: 100vh }
.h-auto   { height: auto }

.min-h-0      { min-height: 0 }
.min-h-full   { min-height: 100% }
.min-h-screen { min-height: 100vh }

.max-w-xs  { max-width: 320px }
.max-w-sm  { max-width: 480px }
.max-w-md  { max-width: 640px }
.max-w-lg  { max-width: 768px }
.max-w-xl  { max-width: 1024px }
.max-w-2xl { max-width: 1280px }

/* ========================================================================
   3. ASPECT RATIOS
   ======================================================================== */

.aspect-square   { aspect-ratio: 1 / 1 }
.aspect-video    { aspect-ratio: 16 / 9 }
.aspect-photo    { aspect-ratio: 4 / 3 }
.aspect-portrait { aspect-ratio: 3 / 4 }

/* ========================================================================
   4. Z-INDEX SCALE
   ======================================================================== */

:root {
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --z-max: 9999;
}

.z-below    { z-index: var(--z-below) }
.z-base     { z-index: var(--z-base) }
.z-dropdown { z-index: var(--z-dropdown) }
.z-sticky   { z-index: var(--z-sticky) }
.z-overlay  { z-index: var(--z-overlay) }
.z-modal    { z-index: var(--z-modal) }
.z-toast    { z-index: var(--z-toast) }
.z-tooltip  { z-index: var(--z-tooltip) }
.z-max      { z-index: var(--z-max) }

/* ========================================================================
   5. GRADIENTS
   ======================================================================== */

.gradient-gold   { background: linear-gradient(to right, rgba(249,201,39,0.15), transparent) }
.gradient-dark   { background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) }
.gradient-accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark, #c7a020)) }
.text-gradient {
  background: linear-gradient(135deg, #f9c927, #e6b800, #f9c927);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========================================================================
   6. GLASSMORPHISM
   ======================================================================== */

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(12, 12, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-light {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.08);
}

.glass-strong {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(12, 12, 12, 0.8);
}

/* Glass on gold background (light mode) */
.light-mode .glass {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}
.light-mode .glass-light {
  background: rgba(255, 255, 255, 0.3);
}
.light-mode .glass-strong {
  background: rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   7. GLOW EFFECTS
   ======================================================================== */

.glow         { box-shadow: 0 0 20px rgba(249, 201, 39, 0.15) }
.glow-gold    { box-shadow: 0 0 30px rgba(249, 201, 39, 0.25) }
.glow-success { box-shadow: 0 0 20px rgba(34, 197, 94, 0.2) }
.glow-danger  { box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) }

.neon-text {
  text-shadow:
    0 0 7px rgba(249, 201, 39, 0.4),
    0 0 20px rgba(249, 201, 39, 0.25),
    0 0 40px rgba(249, 201, 39, 0.15);
}

/* ========================================================================
   8. RESPONSIVE IMAGES
   ======================================================================== */

.img-cover      { object-fit: cover; width: 100%; height: 100% }
.img-contain    { object-fit: contain; width: 100%; height: 100% }
.img-responsive { max-width: 100%; height: auto; display: block }
.img-circle     { border-radius: 50%; object-fit: cover }
.img-rounded    { border-radius: var(--radius, 8px); object-fit: cover }

/* ========================================================================
   9. RESPONSIVE TEXT
   ======================================================================== */

.text-responsive    { font-size: clamp(14px, 2vw, 18px) }
.text-responsive-lg { font-size: clamp(20px, 3vw, 32px) }
.text-responsive-xl { font-size: clamp(28px, 4vw, 48px) }

.text-balance { text-wrap: balance }
.text-pretty  { text-wrap: pretty }

.leading-tight   { line-height: 1.2 }
.leading-normal  { line-height: 1.6 }
.leading-relaxed { line-height: 1.8 }

/* ========================================================================
   10. LAYOUT EXTRAS
   ======================================================================== */

.grid-masonry {
  columns: 3;
  column-gap: 24px;
}
.grid-masonry > * {
  break-inside: avoid;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .grid-masonry { columns: 2 }
}
@media (max-width: 640px) {
  .grid-masonry { columns: 1 }
}

.sticky-top    { position: sticky; top: 0; z-index: var(--z-sticky) }
.sticky-bottom { position: sticky; bottom: 0 }

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

.divide-y > * + * { border-top: 1px solid var(--border, rgba(255,255,255,0.1)) }
.divide-x > * + * { border-left: 1px solid var(--border, rgba(255,255,255,0.1)) }

.space-y-1 > * + * { margin-top: 4px }    .space-x-1 > * + * { margin-left: 4px }
.space-y-2 > * + * { margin-top: 8px }    .space-x-2 > * + * { margin-left: 8px }
.space-y-3 > * + * { margin-top: 12px }   .space-x-3 > * + * { margin-left: 12px }
.space-y-4 > * + * { margin-top: 16px }   .space-x-4 > * + * { margin-left: 16px }
.space-y-5 > * + * { margin-top: 20px }   .space-x-5 > * + * { margin-left: 20px }
.space-y-6 > * + * { margin-top: 24px }   .space-x-6 > * + * { margin-left: 24px }
.space-y-8 > * + * { margin-top: 32px }   .space-x-8 > * + * { margin-left: 32px }

/* ========================================================================
   11. COLOR UTILITIES
   ======================================================================== */

.bg-accent  { background-color: rgba(249, 201, 39, 0.12) }
.bg-success { background-color: rgba(34, 197, 94, 0.12) }
.bg-danger  { background-color: rgba(239, 68, 68, 0.12) }
.bg-warning { background-color: rgba(245, 158, 11, 0.12) }
.bg-info    { background-color: rgba(59, 130, 246, 0.12) }

.bg-transparent { background-color: transparent }
.bg-black       { background-color: #000 }
.bg-white       { background-color: #fff }

.text-accent  { color: var(--accent, #f9c927) }
.text-success { color: var(--success, #22c55e) }
.text-danger  { color: var(--danger, #ef4444) }
.text-warning { color: var(--warning, #f59e0b) }
.text-info    { color: var(--info, #3b82f6) }

.border-accent  { border-color: var(--accent, #f9c927) }
.border-success { border-color: var(--success, #22c55e) }
.border-danger  { border-color: var(--danger, #ef4444) }

/* ========================================================================
   12. BREADCRUMBS
   ======================================================================== */

.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-m, #888) }
.breadcrumbs a { color: var(--text-s, #666); text-decoration: none }
.breadcrumbs a:hover { color: var(--accent, #f9c927) }
.breadcrumbs .separator { color: var(--text-m, #888) }
.breadcrumbs .current { color: var(--text, #fff); font-weight: 500 }

/* ========================================================================
   13. VISIBILITY
   ======================================================================== */

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

.opacity-0   { opacity: 0 }
.opacity-25  { opacity: 0.25 }
.opacity-50  { opacity: 0.5 }
.opacity-75  { opacity: 0.75 }
.opacity-100 { opacity: 1 }

/* ========================================================================
   14. CURSOR
   ======================================================================== */

.cursor-pointer     { cursor: pointer }
.cursor-default     { cursor: default }
.cursor-grab        { cursor: grab }
.cursor-grabbing    { cursor: grabbing }
.cursor-not-allowed { cursor: not-allowed }
.cursor-text        { cursor: text }

/* ========================================================================
   15. POSITION
   ======================================================================== */

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

.inset-0  { top: 0; right: 0; bottom: 0; left: 0 }
.top-0    { top: 0 }
.right-0  { right: 0 }
.bottom-0 { bottom: 0 }
.left-0   { left: 0 }

/* ========================================================================
   16. DISPLAY
   ======================================================================== */

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

/* ========================================================================
   17. RESPONSIVE OVERRIDES (mobile-first at 768px)
   ======================================================================== */

@media (max-width: 768px) {
  .md-hidden      { display: none }
  .md-flex-col    { flex-direction: column }
  .md-text-center { text-align: center }
  .md-p-4         { padding: 16px }
}

@media (min-width: 769px) {
  .md-visible { display: none }
}
@media (max-width: 768px) {
  .md-visible { display: block }
}