/* ====================================================
   SAHAM — Supplemental dark-theme utilities
   Fills gaps between the main styles.css and the HTML
   ==================================================== */

/* CSS variable bridge (old name → new) */
:root {
  --border-dark: rgba(255, 255, 255, 0.10);
  --primary-color: #0F33FF;
  --secondary-color: #0CE8A3;
  --text-white: #FFFFFF;
  --text-black: #0E0F12;
  --bg-light: #EEF1FF;
}

/* Semi-transparent dark overlays over dark body */
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.40) !important; }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.20) !important; }
.bg-black\/10 { background-color: rgba(0, 0, 0, 0.10) !important; }

/* bg-gray variants (dark navy card-level backgrounds) */
.bg-gray\/30 { background-color: rgba(14, 17, 32, 0.80) !important; }
.bg-gray\/20 { background-color: rgba(14, 17, 32, 0.60) !important; }
.bg-gray\/10 { background-color: rgba(14, 17, 32, 0.30) !important; }
.bg-gray     { background-color: #0E1120 !important; }

/* Primary-light badge style (used in nav button) */
.bg-primary-100 { background-color: rgba(15, 51, 255, 0.10) !important; }
.text-primary   { color: #0F33FF !important; }
.text-secondary { color: #0CE8A3 !important; }

/* Logo ticker strip */
.ticker-container {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.5rem 0;
}
.ticker-wrap {
  display: inline-flex;
  align-items: center;
  animation: ticker-scroll 28s linear infinite;
}
.ticker-wrap:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Contact form inputs (dark background variant) */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  background: rgba(0, 0, 0, 0.30);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
form input::placeholder, form textarea::placeholder { color: rgba(255,255,255,0.30); }
form input:focus, form textarea:focus { border-color: #0F33FF; }
form label { color: rgba(255,255,255,0.60); }

/* Project card tags */
.rounded-full { border-radius: 9999px; }
.border-gray-800 { border-color: rgba(255,255,255,0.12) !important; }

/* Aspect ratio helpers */
.aspect-\[1\.3\] { aspect-ratio: 1.3; }

/* Button specific: is-primary */
.button.is-primary {
  background-color: #0F33FF;
  color: #FFFFFF;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.is-primary:hover {
  background-color: #0820AC;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 51, 255, 0.40);
}
.button.is-primary-outline {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.25);
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.is-primary-outline:hover {
  background: #FFFFFF;
  color: #0E0F12;
  border-color: #FFFFFF;
}

/* bg-primary solid section */
.bg-primary {
  background-color: #0F33FF !important;
  color: #FFFFFF !important;
}
.bg-primary * { color: #FFFFFF !important; }
.bg-primary .opacity-60 { opacity: 0.60 !important; }

/* Hover scale effects */
.hover\:scale-\[1\.01\]:hover { transform: scale(1.01); }

/* Leading-relaxed */
.leading-relaxed { line-height: 1.7; }

/* Section title already defined; helper for bg sections */
section.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
section.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
section.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

/* font-500 */
.font-500 { font-weight: 500; }

/* Hero section min-height */
#hero { min-height: auto; }

/* project-card wrapper — no card background of its own */
.project-card { background: transparent; }

/* Gap-2 for flex wraps */
.gap-2 { gap: 0.5rem; }

/* text-xs */
.text-xs { font-size: 0.75rem; }

/* Responsive padding override for md */
@media (min-width: 768px) {
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
}