:root {
    --ernest-black: #1a1a1a;
    --ernest-gray: #f4f4f459;
    --ernest-gray-dark: #d4d4d4;
    --ernest-accent: #0047FF;
  }
  
  body {
    background-color: #ffffff;
    color: var(--ernest-black);
    font-family: 'IBM Plex Mono', monospace;
  }
  
  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--ernest-gray);
    border-left: 1px solid #000;
  }
  ::-webkit-scrollbar-thumb {
    background: #000;
    border: 1px solid #fff;
  }
  
  /* Typography & Utilities */
  .font-sans { font-family: 'Inter', sans-serif; }
  .font-mono { font-family: 'IBM Plex Mono', monospace; }
  .bg-ernest-gray { background-color: var(--ernest-gray); }
  .bg-ernest-black { background-color: var(--ernest-black); }
  .text-ernest-accent { color: var(--ernest-accent); }
  .bg-ernest-accent { background-color: var(--ernest-accent); }
  
  .border-black-2 {
    border: 2px solid #000 !important;
  }
  
  /* Hard Shadows (Brutalist) */
  .shadow-hard {
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
  }
  .shadow-hard-sm {
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
  }
  .shadow-hard-reverse {
    box-shadow: -4px 4px 0px 0px rgba(100,100,100,0.5);
  }
  .hover-shadow-hard:hover {
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2);
    transform: translateY(-1px);
  }
  
  /* Interactive Elements */
  .btn-retro {
    border: 2px solid #000;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-retro-black {
    background: #000;
    color: #fff;
  }
  .btn-retro-black:hover {
    background: #fff;
    color: #000;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2);
  }
  .btn-retro-outline {
    background: transparent;
    color: #000;
  }
  .btn-retro-outline:hover {
    background: var(--ernest-gray-dark);
  }
  
  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }
  
  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  .blink-animation {
    animation: blink 1s infinite;
  }
  
/* Overrides */
a { text-decoration: none; color: inherit; }
.nav-link:hover { color: var(--ernest-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.selection-accent::selection {
  background: var(--ernest-accent);
  color: white;
}

/* Universal hover effect for clickable elements */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
[role="button"]:hover,
.btn:hover,
.clickable:hover {
  color: var(--ernest-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color 0.2s ease;
  background-color: var(--ernest-white);
}
  
  /* Graphy Pattern */
  .bg-graphy {
    background-image: url('https://www.transparenttextures.com/patterns/graphy.png');
    background-color: var(--ernest-gray);
  }