/* Core Design System & Theme Styles */

:root {
  /* Default Light Theme */
  --color-text-base: #1c1917;      /* Stone 900 */
  --color-text-muted: #6b7280;     /* Gray 500 */
  --color-text-inverted: #ffffff;
  --color-fill: #f5f5f5;           /* Light gray */
  --color-muted: #e5e7eb;          /* Gray 200 */
  --color-accent: #f97316;         /* Amber/Orange 500 */
  --color-button-accent: #f97316;
  --color-button-accent-hover: #ea580c;
  --color-button-muted: #f3f4f6;   /* Gray 100 */
}

/* Dark Mode Override */
.dark {
  --color-text-base: #f3f4f6;      /* Gray 100 */
  --color-text-muted: #9ca3af;     /* Gray 400 */
  --color-text-inverted: #ffffff;
  --color-fill: #121212;           /* Dark gray background */
  --color-muted: #242424;          /* Gray 800-like */
  --color-accent: #e34d0a;         /* Deep orange */
  --color-button-accent: #e34d0a;
  --color-button-accent-hover: #f97316;
  --color-button-muted: #1a1a1a;   /* Gray 900-like */
}

/* Global Reset and Typo */
body {
  background-color: var(--color-fill);
  color: var(--color-text-base);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

@keyframes scaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-fill);
}

::-webkit-scrollbar-thumb {
  background: var(--color-muted);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Experience Timeline Line */
.timeline-line::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 8px;
  bottom: 0;
  width: 1px;
  background-color: var(--color-muted);
  opacity: 0.5;
}

/* Print Stylesheet */
@media print {
  body {
    background: #ffffff !important;
    color: #1c1917 !important;
    font-size: 11pt !important;
  }
  
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  /* Reset layout for single page printing */
  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  
  .print-grid {
    display: grid !important;
    grid-template-columns: 2.5fr 7.5fr !important;
    gap: 2rem !important;
  }

  .timeline-line::before {
    display: none !important;
  }
  
  .experience-card {
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4 {
    color: #000000 !important;
  }
  
  a {
    text-decoration: underline !important;
    color: #000000 !important;
  }
}

/* Custom Interactive Matrix & Cross-Highlighting Styles (Screen Only) */
@media screen {
  .matrix-skill-btn, 
  .project-card-C {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* When highlighting a skill, highlight related projects */
  .matrix-project-highlight {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.15) !important;
    transform: translateY(-2px);
  }
  .dark .matrix-project-highlight {
    box-shadow: 0 0 16px rgba(227, 77, 10, 0.2) !important;
  }

  /* When highlighting a project, highlight related skills */
  .matrix-skill-highlight {
    border-color: var(--color-accent) !important;
    background-color: rgba(249, 115, 22, 0.08) !important;
    transform: translateY(-2px);
  }
  .dark .matrix-skill-highlight {
    background-color: rgba(227, 77, 10, 0.12) !important;
  }

  /* Dim other elements during focus/hover */
  .matrix-dimmed {
    opacity: 0.35 !important;
    filter: grayscale(30%);
  }
}