/* LT GIYIM — Bosphorus Loom visual system */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --color-fg: #0f1c2e;
  --color-primary: #c45c26;
  --color-secondary: #1d6b5f;
  --color-accent: #5b4d9e;
  --color-bg: #f0ebe3;
  --color-surface: #faf8f5;
  --color-mesh-a: rgba(196, 92, 38, 0.11);
  --color-mesh-b: rgba(29, 107, 95, 0.1);
  --color-mesh-c: rgba(91, 77, 158, 0.08);
  --radius-card: 14px;
  --radius-nav: 0 0 22px 22px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', system-ui, sans-serif !important;
  color: var(--color-fg) !important;
  background-color: var(--color-bg) !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 15% -15%, var(--color-mesh-a), transparent),
    radial-gradient(ellipse 75% 50% at 95% 10%, var(--color-mesh-b), transparent),
    radial-gradient(ellipse 65% 45% at 5% 95%, var(--color-mesh-c), transparent),
    repeating-linear-gradient(
      108deg,
      transparent,
      transparent 28px,
      rgba(15, 28, 46, 0.018) 28px,
      rgba(15, 28, 46, 0.018) 29px
    );
}

.font-mono,
.font-mono * {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}

.bg-bg { background-color: var(--color-bg) !important; }
.bg-fg { background-color: var(--color-fg) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-white { background-color: var(--color-surface) !important; }

.text-fg { color: var(--color-fg) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }

.border-fg { border-color: var(--color-fg) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.border-gray-800 { border-color: rgba(15, 28, 46, 0.4) !important; }

.bg-zinc-50 { background-color: var(--color-bg) !important; }
.bg-zinc-900 { background-color: var(--color-fg) !important; }

.shadow-neo {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(15, 28, 46, 0.14),
    0 16px 28px rgba(15, 28, 46, 0.1) !important;
}
.shadow-neo-hover:hover,
.hover\:shadow-neo-hover:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 rgba(196, 92, 38, 0.45),
    0 12px 22px rgba(15, 28, 46, 0.14) !important;
}
.hover\:shadow-neo-lg:hover,
.group:hover .group-hover\:shadow-neo-lg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 5px 0 rgba(29, 107, 95, 0.42),
    0 20px 36px rgba(15, 28, 46, 0.16) !important;
}
.focus\:shadow-neo:focus {
  box-shadow:
    0 0 0 3px rgba(91, 77, 158, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 22px rgba(15, 28, 46, 0.12) !important;
}

.selection\:bg-primary ::selection,
.selection\:bg-primary::-moz-selection { background-color: var(--color-primary) !important; }
.hover\:bg-primary:hover { background-color: #a34a1e !important; }
.hover\:bg-fg:hover { background-color: #0a121f !important; }
.hover\:bg-secondary:hover { background-color: #155a50 !important; }
.hover\:bg-accent:hover { background-color: #4a3f85 !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:text-fg:hover { color: var(--color-fg) !important; }
.hover\:border-primary:hover { border-color: var(--color-primary) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }

.group:hover .group-hover\:text-primary { color: var(--color-primary) !important; }
.group:hover .group-hover\:text-secondary { color: var(--color-secondary) !important; }
.group:hover .group-hover\:text-accent { color: var(--color-accent) !important; }
.group:hover .group-hover\:text-fg { color: var(--color-fg) !important; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: #e8e2d8 !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-secondary), var(--color-primary)) !important;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent) !important; }

.from-zinc-900 { --tw-gradient-from: var(--color-fg) var(--tw-gradient-from-position) !important; }
.prose-zinc {
  --tw-prose-headings: var(--color-fg) !important;
  --tw-prose-links: var(--color-primary) !important;
  --tw-prose-bold: var(--color-fg) !important;
  --tw-prose-quotes: var(--color-fg) !important;
  --tw-prose-kbd: var(--color-fg) !important;
  --tw-prose-code: var(--color-fg) !important;
}

.text-gray-500 { color: #5c6678 !important; }
.text-gray-600 { color: #3d4a5c !important; }

nav.bg-white {
  background: linear-gradient(180deg, rgba(250, 248, 245, 0.98), rgba(240, 235, 227, 0.92)) !important;
  backdrop-filter: blur(16px) saturate(140%);
  border: 2px solid rgba(15, 28, 46, 0.07) !important;
  border-bottom: 3px solid var(--color-secondary) !important;
  border-left: 5px solid var(--color-primary) !important;
}

nav {
  border-radius: var(--radius-nav);
  box-shadow: 0 10px 24px rgba(15, 28, 46, 0.08);
}

footer {
  border-radius: 22px 22px 0 0;
  border-top-width: 3px !important;
  border-top-color: var(--color-secondary) !important;
  background:
    linear-gradient(125deg, rgba(196, 92, 38, 0.14) 0%, transparent 38%),
    linear-gradient(220deg, rgba(29, 107, 95, 0.12) 0%, transparent 45%),
    linear-gradient(180deg, #162436 0%, #0a121f 100%) !important;
}

.border-2 {
  border-radius: var(--radius-card);
}

img {
  border-radius: 12px;
}

a.bg-fg.text-white,
button.bg-fg.text-white {
  background-image: linear-gradient(165deg, #1a2d42 0%, var(--color-fg) 100%) !important;
}

a.bg-primary.text-white,
button.bg-primary.text-white {
  background-image: linear-gradient(165deg, #e0703a 0%, var(--color-primary) 100%) !important;
}

/* Marquee strip — distinct woven band */
.bg-accent.animate-marquee,
div.bg-accent.overflow-hidden {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-accent)) !important;
  color: #faf8f5 !important;
}

.bg-accent.animate-marquee span,
div.bg-accent.overflow-hidden span {
  color: #faf8f5 !important;
}