/* ============================================================
   main.css — Base styles + shared design tokens
   radri.it — Marco Radrizzani
   Public pages use Tailwind utilities for layout/typography.
   Admin pages use the CSS variables and components below.
   ============================================================ */

/* ─── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(192,112,32,0.15); }

/* ─── Design tokens (used by admin area) ─────────────────────── */
:root {
  /* Colors */
  --clr-bg:           #FAFAF8;
  --clr-surface:      #FFFFFF;
  --clr-border:       #E5E3E0;
  --clr-border-2:     #D4D2CF;
  --clr-accent:       #c07020;
  --clr-accent-dark:  #9a5818;
  --clr-accent-dim:   rgba(192, 112, 32, 0.08);
  --clr-ink:          #111111;
  --clr-white:        #FFFFFF;
  --clr-text-1:       #1a1a1a;
  --clr-text-2:       #404040;
  --clr-text-3:       #737373;
  --clr-text-muted:   #a3a3a3;
  --clr-danger:       #b83020;
  --clr-success:      #1a6b3a;
  --clr-warning:      #b07a10;
  --clr-info:         #1a5a8a;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;

  /* Border radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    9999;

  /* Typography scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* Font stacks */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
}

/* ─── Hero animations (index.html) ────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Expo-out easing: snappier start, smooth arrival — more premium than linear ease */
.anim-1 { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both; }
.anim-2 { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
.anim-3 { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both; }
.anim-4 { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
.anim-5 { animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.70s both; }

/* ─── Scroll reveal (all pages) ─────────────────────────────── */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  animation: revealFallback 0.4s ease 0.9s both;
}
.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes revealFallback {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Dark site shell ────────────────────────────────────────── */
.site-dark {
  background-color: #181614;
  color: #F0ECE4;
}

/* ─── Navigation link colors (dark theme) ───────────────────── */
.nav-link {
  color: rgba(240, 236, 228, 0.55);
  text-decoration: none;
}
.nav-link:hover,
.nav-link.active-section {
  color: #F0ECE4;
}

.mobile-nav-link {
  color: rgba(240, 236, 228, 0.55);
  text-decoration: none;
  display: block;
}
.mobile-nav-link:hover {
  color: #c07020;
}

.lang-pair { color: rgba(240, 236, 228, 0.35); }
.lang-toggle-btn { background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; color: inherit; padding: 0; }
.lang-toggle-btn:hover { color: #F0ECE4; }

.nav-toggle-btn { color: rgba(240, 236, 228, 0.6); }
.nav-toggle-btn:hover { color: #F0ECE4; }

/* ─── Header scroll state ─────────────────────────────────────── */
#site-header {
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
#site-header.scrolled {
  background: rgba(24, 22, 20, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ─── Filter buttons (projects page — dark theme) ────────────── */
.filter-btn {
  padding: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  color: rgba(240, 236, 228, 0.4);
  border: 1px solid rgba(240, 236, 228, 0.1);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.filter-btn:hover  { color: rgba(240, 236, 228, 0.75); border-color: rgba(240, 236, 228, 0.2); }
.filter-btn.active { color: #c07020; border-color: #c07020; background: rgba(192, 112, 32, 0.07); }

/* ─── Form feedback (contact form) ──────────────────────────── */
.form-feedback {
  display: none;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  border: 1px solid;
  margin-top: 0.25rem;
}
.form-feedback--success { color: #166534; background: rgba(34,197,94,0.07);  border-color: rgba(34,197,94,0.25); }
.form-feedback--error   { color: #991b1b; background: rgba(239,68,68,0.07);  border-color: rgba(239,68,68,0.25); }
.form-feedback--info    { color: #9a5818; background: rgba(192,112,32,0.07); border-color: rgba(192,112,32,0.25); }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }

/* ─── Shared component classes (admin area) ──────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.btn--primary { background: var(--clr-ink); color: var(--clr-white); border-color: var(--clr-ink); }
.btn--primary:hover { background: var(--clr-accent); border-color: var(--clr-accent); }

.btn--outline { background: transparent; color: var(--clr-ink); border-color: var(--clr-border); }
.btn--outline:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

.btn--ghost { background: transparent; color: var(--clr-text-3); border-color: transparent; }
.btn--ghost:hover { background: var(--clr-bg); color: var(--clr-ink); }

.btn--sm { padding: 0.35rem var(--space-3); font-size: var(--text-xs); }
.btn--lg { padding: 0.75rem var(--space-6); font-size: var(--text-base); }

/* Utility */
.w-full { width: 100%; }

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--clr-text-3);
  letter-spacing: 0.03em;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.55rem var(--space-3);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  color: var(--clr-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(192,112,32,0.08);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--clr-text-muted); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.form-select   { cursor: pointer; appearance: auto; }

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-8);
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--clr-border);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.badge--success { color: var(--clr-success); background: rgba(26,107,58,0.06);  border-color: rgba(26,107,58,0.25); }
.badge--warning { color: var(--clr-warning); background: rgba(176,122,16,0.06); border-color: rgba(176,122,16,0.25); }
.badge--gray    { color: var(--clr-text-muted); background: transparent;        border-color: var(--clr-border); }