@import './variables.css';

/* Design themes for R.O.O.T.S. CF web */

/* 1. Sleek Editorial (blog) ---------------------------------------------- */
/* Article typography */
.prose-sleek {
  font-size: 1.125rem; /* ~18px, Tailwind prose-lg */
  color: var(--color-text-main);
  line-height: 1.6; /* tightened leading */
}

/* Card pattern */
.sleek-card {
  border: 1px solid var(--color-border-light);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease;
}
.sleek-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* Buttons */
.sleek-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem; /* px-5 py-2.5 */
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  transition: background-color 0.2s ease;
}
.sleek-button:hover {
  background-color: var(--color-btn-primary-hover-bg);
  color: var(--color-btn-primary-hover-text);
}

/* Hero gradient */
.sleek-hero {
  background-image: linear-gradient(to bottom, var(--color-gradient-start), var(--color-gradient-end));
}

/* 2. Glassy (landing + marketing) ---------------------------------------- */
.glassy-container {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
}
.glassy-container.dark {
  background-color: rgba(15,23,42,0.4); /* dark:bg-slate-900/40 */
}

/* Glassy navigation bar */
.glassy-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease;
}
.glassy-nav:hover {
  box-shadow: 0 0 60px rgba(255,215,0,0.4); /* larger gold glow */
}
.glassy-nav .nav-link {
  padding: 0.5rem 1rem;
  color: var(--color-text-main);
  transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease, transform 0.2s ease;
}
.glassy-nav .nav-link:hover {
  background-color: #FFD700; /* gold */
  color: #000000;
  border-radius: 0; /* square */
  animation: nav-throb 0.8s ease-in-out infinite alternate; /* throb */
}

.glassy-nav .nav-link.active {
  font-weight: bold;
  background-color: #FFD700; /* gold */
  color: #000000;
}

@keyframes nav-throb {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Accent gradient text */
.glassy-accent-text {
  background-image: linear-gradient(to right, #d946ef, #06b6d4); /* fuchsia-500 to cyan-500 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3. Neo-brutalist (bold) ------------------------------------------------ */
.neo-brutalist {
  border: 2px solid var(--color-text-main);
}

.neo-brutalist-button {
  border: 2px solid var(--color-text-main);
  background-color: var(--color-btn-primary-bg);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.neo-brutalist-button:hover {
  transform: translateY(2px);
  background-color: var(--color-btn-primary-hover-bg);
  color: var(--color-btn-primary-hover-text);
}