/*
 * style.css — Firmeza Design System
 *
 * Composition layer — loaded LAST. Page-level rules, theming polish,
 * and global decorative defaults.
 */

/* ── Page shell ──────────────────────────────────────────────────────── */

/* Prevent horizontal scroll WITHOUT turning html/body into scroll containers.
   `overflow-x: hidden` forces overflow-y to compute as `auto`, which makes both
   the root and body nested scroll containers and breaks normal viewport
   vertical scrolling (and position: sticky). `clip` clips horizontally with no
   scroll-container side effects. */
html,
body {
  overflow-x: clip;
}

/* Smooth scroll — overridden by prefers-reduced-motion in reset.css */
html {
  scroll-behavior: smooth;
}

/* ── Selection colour ────────────────────────────────────────────────── */

::selection {
  background-color: var(--color-brand-500);
  color:            var(--color-white);
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-zinc-300);
  border-radius:    var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-zinc-400);
}

/* Firefox */
* {
  scrollbar-width:  thin;
  scrollbar-color:  var(--color-zinc-300) transparent;
}

/* ── Focus ring (global a11y) ────────────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--color-brand-500);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ── Image defaults ──────────────────────────────────────────────────── */

img {
  display:    block;
  max-width:  100%;
  height:     auto;
  object-fit: cover;
}

/* ── SVG icon defaults ───────────────────────────────────────────────── */

svg {
  display:       inline-block;
  vertical-align: middle;
}

/* ── No-scroll (body lock for modals/drawers) ────────────────────────── */

body.no-scroll {
  overflow: hidden;
}

/* ── Background colour helpers ───────────────────────────────────────── */

.bg-white     { background-color: var(--color-white);      }
.bg-subtle    { background-color: var(--color-bg-subtle);  }
.bg-muted     { background-color: var(--color-bg-muted);   }
.bg-surface   { background-color: var(--color-surface);    }
.bg-brand     { background-color: var(--color-brand-600);  }
.bg-dark      { background-color: var(--color-zinc-950);   }

.bg-gradient-brand   { background: var(--gradient-brand);   }
.bg-gradient-dark    { background: var(--gradient-dark);    }
.bg-gradient-surface { background: var(--gradient-surface); }
.bg-gradient-mesh    { background: var(--gradient-mesh);    }

/* ── Glass surface ───────────────────────────────────────────────────── */

.glass {
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border:          1px solid var(--glass-border);
}

.glass--strong {
  background:      var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
}

.glass--brand {
  background:      var(--glass-bg-brand);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:          1px solid rgba(21, 67, 120, 0.2);
}

/* ── Utility: shadow ─────────────────────────────────────────────────── */

.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);   }
.shadow-xl   { box-shadow: var(--shadow-xl);   }
.shadow-2xl  { box-shadow: var(--shadow-2xl);  }
.shadow-none { box-shadow: none;               }
.glow-brand  { box-shadow: var(--glow-brand);  }

/* ── Utility: border ─────────────────────────────────────────────────── */

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

.rounded-xs   { border-radius: var(--radius-xs); }
.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-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Utility: sizing ─────────────────────────────────────────────────── */

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.h-full    { height: 100%; }
.h-screen  { height: 100dvh; }
.min-h-screen { min-height: 100dvh; }
.max-w-full   { max-width: 100%; }

/* ── Utility: display ────────────────────────────────────────────────── */

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

/* ── Utility: visibility ─────────────────────────────────────────────── */

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

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

/* ── Utility: position ───────────────────────────────────────────────── */

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

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

/* ── Utility: overflow ───────────────────────────────────────────────── */

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

/* ── Utility: cursor ─────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-none    { cursor: none; }

/* ── Utility: pointer events ─────────────────────────────────────────── */

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

/* ── Utility: user select ────────────────────────────────────────────── */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }

/* ── Utility: opacity ────────────────────────────────────────────────── */

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

/* ── Utility: spacing ────────────────────────────────────────────────── */

.mx-auto { margin-inline: auto; }
.ml-auto { margin-left:   auto; }
.mr-auto { margin-right:  auto; }
.mt-auto { margin-top:    auto; }
.mb-auto { margin-bottom: auto; }

.m-0   { margin: 0; }
.m-4   { margin: var(--space-4); }

.mt-0  { margin-top:    0; }
.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); }
.mt-16 { margin-top:    var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2);  }
.mb-3  { margin-bottom: var(--space-3);  }
.mb-4  { margin-bottom: var(--space-4);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.p-0   { padding: 0; }
.p-4   { padding: var(--space-4);  }
.p-6   { padding: var(--space-6);  }
.p-8   { padding: var(--space-8);  }
.p-10  { padding: var(--space-10); }
.p-12  { padding: var(--space-12); }

.px-4  { padding-inline: var(--space-4);  }
.px-6  { padding-inline: var(--space-6);  }
.px-8  { padding-inline: var(--space-8);  }
.px-10 { padding-inline: var(--space-10); }
.px-12 { padding-inline: var(--space-12); }

.py-2  { padding-block: var(--space-2);  }
.py-4  { padding-block: var(--space-4);  }
.py-6  { padding-block: var(--space-6);  }
.py-8  { padding-block: var(--space-8);  }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

/* ── Utility: z-index ────────────────────────────────────────────────── */

.z-below    { z-index: var(--z-below);    }
.z-base     { z-index: var(--z-base);     }
.z-raised   { z-index: var(--z-raised);   }
.z-sticky   { z-index: var(--z-sticky);   }
.z-overlay  { z-index: var(--z-overlay);  }
.z-modal    { z-index: var(--z-modal);    }
.z-cursor   { z-index: var(--z-cursor);   }

/* ── Utility: object fit ─────────────────────────────────────────────── */

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

/* ── Utility: isolate ────────────────────────────────────────────────── */

.isolate { isolation: isolate; }