/* Global typography & font (Vazir) */
@font-face {
  font-family: "Vazir";
  src: url("../fonts/vazir-font-v16.1.0/Vazir.woff2") format("woff2"),
    url("../fonts/vazir-font-v16.1.0/Vazir.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazir";
  src: url("../fonts/vazir-font-v16.1.0/Vazir-Bold.woff2") format("woff2"),
    url("../fonts/vazir-font-v16.1.0/Vazir-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #0a3d62;
  --color-primary-dark: #072a44;
  --color-secondary: #3c9dd0;
  --color-secondary-light: rgba(60, 157, 208, 0.12);
  --color-surface: #ffffff;
  --color-muted: #c0c5c9;
  --color-muted-soft: rgba(192, 197, 201, 0.45);
  --color-text: #0f2435;
  --shadow-soft: 0 18px 40px rgba(10, 61, 98, 0.08);
}

html {
  scroll-behavior: smooth;
  font-family: "Vazir", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: var(--color-surface);
  color: var(--color-text);
}

body {
  font-family: inherit;
  background-color: var(--color-surface);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  transition: color 0.25s ease;
}

a:hover {
  color: var(--color-secondary);
}

/* Custom overrides on top of Tailwind CDN */

.hero-gradient {
  background: linear-gradient(
    160deg,
    rgba(192, 197, 201, 0.35),
    rgba(255, 255, 255, 0.95)
  );
}

.card-shadow {
  background-color: var(--color-surface);
  border: 1px solid var(--color-muted-soft);
  box-shadow: var(--shadow-soft);
}

.nav-blur {
  backdrop-filter: blur(32px) saturate(190%) contrast(1.05);
  -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(1.05);
  background: linear-gradient(
    135deg,
    rgba(248, 250, 255, 0.28),
    rgba(226, 233, 255, 0.18)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.hero-panel-overlay {
  background: linear-gradient(
    135deg,
    rgba(10, 61, 98, 0.08),
    rgba(60, 157, 208, 0.12)
  );
}

.palette-panel {
  background: linear-gradient(
    120deg,
    rgba(10, 61, 98, 0.08),
    rgba(192, 197, 201, 0.3)
  );
}

.gallery-grid img,
.gallery-grid video {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}

.gallery-grid img:hover,
.gallery-grid video:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 36px rgba(10, 61, 98, 0.12);
}

.shadow-lg {
  box-shadow: 0 14px 28px rgba(10, 61, 98, 0.14) !important;
}

.shadow-blue-500\/40 {
  --tw-shadow-color: rgba(10, 61, 98, 0.25) !important;
}

.modal-open {
  overflow: hidden;
}

/* Palette overrides for Tailwind utility classes */

.text-blue-600,
.text-blue-500,
.hover\:text-blue-600:hover,
.hover\:text-blue-500:hover {
  color: var(--color-primary) !important;
}

.text-blue-400,
.text-blue-300,
.text-green-600,
.text-green-400,
.hover\:text-blue-400:hover,
.hover\:text-green-600:hover,
.hover\:text-green-400:hover {
  color: var(--color-secondary) !important;
}

.bg-blue-500,
.bg-blue-600,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover {
  background-color: var(--color-primary) !important;
}

.hover\:bg-blue-400:hover {
  background-color: var(--color-secondary) !important;
}

.bg-blue-500\/10 {
  background-color: rgba(10, 61, 98, 0.08) !important;
}

.bg-blue-500\/5 {
  background-color: rgba(10, 61, 98, 0.05) !important;
}

.bg-blue-100 {
  background-color: rgba(60, 157, 208, 0.18) !important;
}

.bg-blue-50 {
  background-color: rgba(192, 197, 201, 0.4) !important;
}

.bg-blue-50\/80 {
  background-color: rgba(192, 197, 201, 0.6) !important;
}

.border-blue-500 {
  border-color: var(--color-primary) !important;
}

.border-blue-500\/30 {
  border-color: rgba(10, 61, 98, 0.2) !important;
}

.hover\:border-blue-500:hover,
.hover\:border-blue-500\/80:hover {
  border-color: rgba(10, 61, 98, 0.5) !important;
}

.border-blue-400,
.border-blue-300,
.border-blue-400\/50 {
  border-color: rgba(60, 157, 208, 0.45) !important;
}

.ring-blue-300 {
  --tw-ring-color: rgba(60, 157, 208, 0.35) !important;
}

.ring-blue-400\/50 {
  --tw-ring-color: rgba(60, 157, 208, 0.45) !important;
}

.text-green-400,
.text-green-600 {
  color: var(--color-secondary) !important;
}

.bg-green-100 {
  background-color: rgba(60, 157, 208, 0.12) !important;
}

.bg-green-50,
.hover\:bg-green-50:hover {
  background-color: rgba(60, 157, 208, 0.08) !important;
}

.border-green-400\/60 {
  border-color: rgba(60, 157, 208, 0.45) !important;
}

.gallery-grid .absolute.bottom-3 {
  color: #ffffff;
  left: auto !important;
  right: 0.75rem;
  text-align: right;
}

.gallery-grid .absolute.bottom-3 p {
  color: inherit !important;
}