/* Base styles. Tokens are generated from design-system/tokens.json. */
/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--silver-200);
  background-color: var(--bg-primary);
  min-height: 100vh;
}

/* Background Grid - removed. The previous grid + noise overlay added visual
   clutter without aiding comprehension; the body's own background-color
   (--bg-primary) is enough. If a future redesign wants subtle texture,
   reintroduce it here as a single, intentional layer, not a stack. */
body::before,
body::after {
  content: none;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--silver-100);
  line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--silver-100);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it. The browser already has a default
   for prefers-reduced-motion but adding a global rule makes the intent
   obvious and stops animations from being visually distracting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

strong {
  color: var(--silver-100);
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  color: var(--accent-text);
}

/* ===== Layout Utilities ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--space-section) 0;
}

.section-sm {
  padding: var(--space-3xl) 0;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  
  .section { padding: var(--space-3xl) 0; }
  .section-sm { padding: var(--space-2xl) 0; }
}

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Spacing Utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Text Utilities */
.text-center { text-align: center; }
.text-gradient {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-muted { color: var(--silver-400); }
.text-accent { color: var(--accent-text); }
.text-silver { color: var(--silver-100); }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-mono { font-family: var(--font-mono); }

/* ===== Selection & Scrollbar ===== */
::selection {
  background: var(--accent-red);
  color: var(--silver-100);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--silver-400);
}

/* ===== Loading States ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-elevated) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--accent-red-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--accent-red-glow), 0 0 60px var(--accent-red-subtle);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slower) forwards;
  opacity: 0;
}

.animate-fade-in {
  animation: fadeIn var(--transition-slower) forwards;
  opacity: 0;
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Stagger delays for children */
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 80ms; }
.stagger-children > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { animation-delay: 480ms; }
.stagger-children > *:nth-child(8) { animation-delay: 560ms; }

/* Scroll reveal - elements start hidden and animate when in view */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Accessibility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content: hidden by default, shown when focused via Tab. Lets
   keyboard users jump past the navbar/hero straight to the <main> id.
   Sits above the fixed navbar (z-index: 999) so it is visible the
   moment it is focused, even with the navbar covering the page top.
   The element stays in the layout tree (off-screen via negative top,
   not transform) so screen readers and tab order find it reliably. */
.skip-to-content {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--accent-red);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: top 0.18s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Language switcher in the navbar. EN | ET, with the active one highlighted. */
.navbar-lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--navbar-border);
}
.navbar-lang-link {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  transition: color var(--transition-fast);
}
.navbar-lang-link:hover {
  color: var(--text-primary);
}
.navbar-lang-link.active {
  color: var(--accent-text);
}
.navbar-lang-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 0.8125rem;
}

/* Theme toggle button in the navbar. Sun shows in dark mode, moon shows in
   light mode. Color is the muted text token so it sits next to the lang
   switcher without competing for attention. */
.navbar-theme {
  display: flex;
  align-items: center;
  margin-left: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--navbar-border);
}

.navbar-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--silver-300);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.navbar-theme-btn:hover {
  color: var(--silver-100);
  background: var(--bg-tertiary);
  border-color: var(--border);
}

.navbar-theme-btn:focus-visible {
  outline: none;
  color: var(--accent-text);
  border-color: var(--accent-red);
  box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.navbar-theme-icon {
  display: block;
}

/* In dark mode, show the sun (action: switch to light). */
:root:not([data-theme="light"]) .navbar-theme-icon--moon { display: none; }
:root[data-theme="light"] .navbar-theme-icon--sun { display: none; }

/* Reduced motion: a more comprehensive rule lives further up in the file
   near the global focus-visible rule. Keeping this comment as a marker so
   future readers know the rule was consolidated. */

/* ===== Print Styles ===== */
/* Goal: /about should print as a clean CV. Other pages get a basic clean print
   treatment (no nav, no footer, no animations). Keep paper-friendly defaults. */
@media print {
  /* Force light background, dark text on all pages */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Disable animations and transitions */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Hide site chrome on every page */
  .navbar,
  .mobile-overlay,
  .footer,
  .navbar-toggle,
  .btn,
  .hero,
  .hero-bg,
  .hero-grid,
  .hero-orb-1,
  .hero-orb-2,
  nav[aria-label="Contact options"] {
    display: none !important;
  }

  /* Remove background images, colors, shadows, and rounded corners for paper */
  *, *::before, *::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Force readable print colors */
  .skill-badge,
  .project-tag,
  .tag,
  .section-label,
  .stat-card,
  .about-avatar-frame {
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }
  .project-tag--live,
  .now-live,
  .live-tag {
    border-color: #000 !important;
  }

  /* Single column, full width, no extra padding */
  .container,
  .container-narrow,
  .section,
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Section spacing */
  h2 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  h3 {
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Avoid breaking inside list items, timeline items, focus cards */
  li, .timeline-item, .skill-category, .about-focus-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Page break hints between major sections */
  .timeline, .skills-grid--about, .about-focus-grid {
    page-break-inside: auto;
  }

  /* Show external URLs after link text (CV mode for /about) */
  body:has(.about-name) a[href^="http"]:not([class])::after,
  body:has(.about-name) a[href^="mailto"]::after,
  body:has(.about-name) a[href^="https://github.com/AG064/ag064.eu"]::after,
  body:has(.about-name) a[href^="https://www.kutseregister.ee"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }

  /* Page header for /about: keep title prominent, drop eyebrow on print */
  body:has(.about-name) .page-header-eyebrow {
    font-size: 0.7rem !important;
  }
  body:has(.about-name) .page-header-title {
    font-size: 1.6rem !important;
    margin-top: 0 !important;
  }
  body:has(.about-name) .about-name {
    font-size: 1.4rem !important;
  }
  body:has(.about-name) .about-avatar,
  body:has(.about-name) .about-avatar-frame {
    display: none !important;
  }
  body:has(.about-name) #contact,
  body:has(.about-name) .page-header-subtitle {
    display: none !important;
  }

  /* Make timeline more compact for paper */
  .timeline-date {
    font-size: 0.85rem !important;
  }
  .timeline-description {
    font-size: 0.9rem !important;
  }

  /* Page setup */
  @page {
    size: A4;
    margin: 1.5cm 1.2cm;
  }

  /* Make sure links are visible but not underlined unless hover */
  a {
    color: #000 !important;
    text-decoration: none;
  }
}