/* ============================================================
   Digital Grind Studio — Custom CSS (Bootstrap 5.3 companion)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Inter+Tight:ital,wght@0,500;0,600;0,700;1,700&display=fallback');

/* ---- CSS Custom Properties ---- */
:root {
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Aliases for gradient border expressions */
  --color-white: #fff;
  --color-zinc-100: var(--zinc-100);
  --color-zinc-300: var(--zinc-300);
  --color-zinc-700: var(--zinc-700);
}

/* ---- Base ---- */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--zinc-900);
  letter-spacing: -0.025em;
}

[x-cloak] { display: none; }

/* ---- Font Families ---- */
.font-inter       { font-family: 'Inter', sans-serif !important; }
.font-inter-tight { font-family: 'Inter Tight', sans-serif !important; }
.font-mono        { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important; }

/* ---- Typography Scale ---- */
.text-xs   { font-size: 0.75rem !important; line-height: 1.5; }
.text-sm   { font-size: 0.875rem !important; line-height: 1.5715; }
.text-base { font-size: 1rem !important; line-height: 1.5; letter-spacing: -0.017em; }
.text-lg   { font-size: 1.125rem !important; line-height: 1.5; letter-spacing: -0.017em; }
.text-2xl  { font-size: 1.5rem !important; line-height: 1.415; letter-spacing: -0.017em; }
.text-3xl  { font-size: 2rem !important; line-height: 1.3125; letter-spacing: -0.017em; }
.text-4xl  { font-size: 2.5rem !important; line-height: 1.25; letter-spacing: -0.017em; }
.text-5xl  { font-size: 3.25rem !important; line-height: 1.2; letter-spacing: -0.017em; }

/* Arbitrary text sizes */
.text-0625 { font-size: 0.625rem !important; }
.text-075  { font-size: 0.75rem !important; }
.text-0875 { font-size: 0.875rem !important; }

/* Responsive text */
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.5rem !important; line-height: 1.25; letter-spacing: -0.017em; }
  .md\:text-5xl { font-size: 3.25rem !important; line-height: 1.2; letter-spacing: -0.017em; }
}

/* ---- Font Weight ---- */
.font-bold     { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium   { font-weight: 500 !important; }

/* ---- Letter Spacing ---- */
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-006  { letter-spacing: 0.06em !important; }
.tracking-008  { letter-spacing: 0.08em !important; }
.tracking-014  { letter-spacing: 0.14em !important; }

/* ---- Line Height ---- */
.leading-tight { line-height: 1.25 !important; }

/* ---- Text Decoration ---- */
.uppercase    { text-transform: uppercase !important; }
.line-through { text-decoration: line-through !important; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Text Colors ---- */
.text-zinc-100 { color: var(--zinc-100) !important; }
.text-zinc-200 { color: var(--zinc-200) !important; }
.text-zinc-400 { color: var(--zinc-400) !important; }
.text-zinc-500 { color: var(--zinc-500) !important; }
.text-zinc-700 { color: var(--zinc-700) !important; }
.text-zinc-900 { color: var(--zinc-900) !important; }

/* ---- Background Colors ---- */
.bg-zinc-50  { background-color: var(--zinc-50) !important; }
.bg-zinc-800 { background-color: var(--zinc-800) !important; }
.bg-zinc-900 { background-color: var(--zinc-900) !important; }

/* Brand colors */
.bg-deep-graphite  { background-color: #1B1B1B !important; }
.bg-walnut         { background-color: #6B4E3D !important; }
.bg-sand           { background-color: #D7C7B6 !important; }
.bg-muted-steel    { background-color: #3F5566 !important; }
.bg-electric-amber { background-color: #C98A2B !important; }

/* ---- Gradient Borders ---- */
.gradient-border-light {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#fff, var(--zinc-50)) padding-box,
    linear-gradient(120deg, var(--zinc-300), var(--zinc-100), var(--zinc-300)) border-box !important;
}

.gradient-border-white {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--zinc-300), var(--zinc-100), var(--zinc-300)) border-box !important;
}

.gradient-border-dark {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#2E2E32, #2E2E32) padding-box,
    linear-gradient(120deg, var(--zinc-700), transparent, var(--zinc-700)) border-box !important;
}

/* ---- Hero Gradient Overlay ---- */
.hero-gradient-overlay {
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent, var(--zinc-50));
}

/* ---- Layout ---- */
.flex        { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid        { display: grid !important; }
.flex-col    { flex-direction: column !important; }
.flex-row    { flex-direction: row !important; }
.items-center   { align-items: center !important; }
.items-start    { align-items: flex-start !important; }
.items-end      { align-items: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.grow        { flex-grow: 1 !important; }
.shrink-0    { flex-shrink: 0 !important; }
.min-h-screen { min-height: 100vh !important; }
.w-full      { width: 100% !important; }
.h-full      { height: 100% !important; }
.h-auto      { height: auto !important; }
.h-14        { height: 3.5rem !important; }

/* ---- Grid Templates ---- */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

@media (min-width: 576px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:max-w-none  { max-width: none !important; }
  .sm\:flex-row    { flex-direction: row !important; }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 992px) {
  .lg\:flex         { display: flex !important; }
  .lg\:items-center { align-items: center !important; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .lg\:max-w-none   { max-width: none !important; }
  .lg\:min-w-524    { min-width: 524px !important; }
}

/* ---- Max Width ---- */
.max-w-6xl { max-width: 72rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-sm  { max-width: 24rem !important; }
.max-w-xs  { max-width: 20rem !important; }

@media (min-width: 576px) {
  .sm\:max-w-none { max-width: none !important; }
}

/* Ensure grid children stretch full width */
.grid { width: 100%; }

/* ---- Positioning ---- */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-2    { top: 0.5rem !important; }
.top-half { top: 50% !important; }
.-right-20 { right: -5rem !important; }
.-translate-y-half { transform: translateY(-50%) !important; }
.z-30     { z-index: 30 !important; }

@media (min-width: 768px) {
  .md\:top-6 { top: 1.5rem !important; }
}

/* ---- Spacing ---- */
.p-4  { padding: 1rem !important; }
.p-5  { padding: 1.25rem !important; }
.p-6  { padding: 1.5rem !important; }
.p-12 { padding: 3rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-05 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pt-96px { padding-top: 96px !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-12 { padding-bottom: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mr-4 { margin-right: 1rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }

/* Space utilities */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-12 > * + * { margin-top: 3rem; }

@media (min-width: 576px) {
  .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .sm\:gap-2 { gap: 0.5rem !important; }
  .sm\:gap-4 { gap: 1rem !important; }
}
@media (min-width: 768px) {
  .md\:pt-12  { padding-top: 3rem !important; }
  .md\:pt-112px { padding-top: 112px !important; }
  .md\:pb-16  { padding-bottom: 4rem !important; }
  .md\:pb-20  { padding-bottom: 5rem !important; }
  .md\:py-20  { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
@media (min-width: 992px) {
  .lg\:gap-8  { gap: 2rem !important; }
  .lg\:gap-12 { gap: 3rem !important; }
  .lg\:space-x-12 > * + * { margin-left: 3rem !important; }
  .lg\:space-y-0 > * + *  { margin-top: 0 !important; }
}
@media (min-width: 1200px) {
  .xl\:space-x-24 > * + * { margin-left: 6rem !important; }
}

/* ---- Borders ---- */
.border   { border: 1px solid var(--zinc-200) !important; }
.border-t { border-top: 1px solid var(--zinc-200) !important; }
.border-b { border-bottom: 1px solid var(--zinc-200) !important; }
.border-transparent { border-color: transparent !important; }
.border-zinc-100 { border-color: var(--zinc-100) !important; }
.border-zinc-200 { border-color: var(--zinc-200) !important; }

/* ---- Border Radius ---- */
.rounded-sm  { border-radius: 0.125rem !important; }
.rounded-lg  { border-radius: 0.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* ---- Shadows ---- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; }

/* ---- Visual ---- */
.overflow-hidden { overflow: hidden !important; }
.object-cover { object-fit: cover !important; }
.pointer-events-none { pointer-events: none !important; }
.opacity-60  { opacity: 0.6 !important; }
.opacity-007 { opacity: 0.07 !important; }
.invert      { filter: invert(1) !important; }
.bg-white    { background-color: #fff !important; }
.text-white  { color: #fff !important; }
.text-center { text-align: center !important; }

/* ---- Hover States ---- */
.hover\:bg-zinc-800:hover { background-color: var(--zinc-800) !important; }

/* ---- Buttons ---- */
.btn,
.btn-sm {
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  letter-spacing: normal;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.btn    { padding: 0.5rem 1rem; }
.btn-sm { padding: 0.25rem 0.5rem; }

/* ---- Profile Page ---- */
.swatch { aspect-ratio: 3 / 2; }

/* ---- Hamburger Animation ---- */
.hamburger svg > *:nth-child(1),
.hamburger svg > *:nth-child(2),
.hamburger svg > *:nth-child(3) {
  transform-origin: center;
  transform: rotate(0deg);
}
.hamburger svg > *:nth-child(1) {
  transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in;
}
.hamburger svg > *:nth-child(2) {
  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger svg > *:nth-child(3) {
  transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in;
}
.hamburger.active svg > *:nth-child(1) {
  opacity: 0; y: 11;
  transform: rotate(225deg);
  transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out;
}
.hamburger.active svg > *:nth-child(2) {
  transform: rotate(225deg);
  transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger.active svg > *:nth-child(3) {
  y: 11;
  transform: rotate(135deg);
  transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
}