/* custom.css */
:root {
    /* Ink & Stone — Light Mode */
    --color-bg:             #FAFAF9; /* Stone 50 */
    --color-surface:        #FFFFFF; /* White */
    --color-primary:        #18181B; /* Zinc 900 */
    --color-secondary:      #787069; /* Stone 500* */
    --color-text-primary:   #1C1917; /* Stone 900 */
    --color-text-secondary: #57534E; /* Stone 600 */
    --color-border:         #D6D3D1; /* Stone 300 */
    --color-border-subtle:  #E7E5E4; /* Stone 200 */
    --color-hover:          #F5F5F4; /* Stone 100 */
    --color-focus-ring:     #18181B; /* same as primary */
    --card-shadow:          rgba(0, 0, 0, 0.07);
  }

  /* Dark Mode Colors */
  [data-theme="dark"] {
    --color-bg:             #0C0A09; /* Stone 950 */
    --color-surface:        #1C1917; /* Stone 900 */
    --color-primary:        #E7E5E4; /* Stone 200 */
    --color-secondary:      #8A8380; /* Stone 400* */
    --color-text-primary:   #FAFAF9; /* Stone 50 */
    --color-text-secondary: #A8A29E; /* Stone 400 */
    --color-border:         #292524; /* Stone 800 */
    --color-border-subtle:  #1C1917; /* Stone 900 */
    --color-hover:          #292524; /* Stone 800 */
    --color-focus-ring:     #E7E5E4; /* same as primary */
    --card-shadow:          rgba(0, 0, 0, 0.5);
  }

  /* Transition effects for theme switching */
  body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Dark mode toggle button styles */
  .dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .dark-mode-toggle:hover {
    background-color: var(--color-border);
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
    opacity: 0.85;
  }

  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .btn-secondary:hover {
    background-color: var(--color-hover);
  }

  .nav-link {
    color: var(--color-text-primary);
    position: relative;
    text-decoration: none;
  }

  .nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-secondary);
    transition: width 0.2s ease;
  }

  .nav-link:hover:after {
    width: 100%;
  }

  .nav-link.active:after {
    width: 100%;
    background-color: var(--color-primary);
  }

  .card {
    border: 1px solid var(--color-border-subtle);
    padding: 1.5rem;
    border-radius: 0.25rem;
    background-color: var(--color-surface);
    transition: border-color 0.2s ease;
  }

  .card:hover {
    border-color: var(--color-secondary);
  }

  /* Form styles */
  .form-input {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    transition: border-color 0.2s ease;
  }

  .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
  }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    font-weight: 500;
  }

  /* Enhanced dark mode support */
  .bg-primary {
    background-color: var(--color-bg) !important;
  }

  .bg-secondary {
    background-color: var(--color-surface) !important;
  }

  .text-primary {
    color: var(--color-text-primary) !important;
  }

  .text-secondary {
    color: var(--color-text-secondary) !important;
  }

  .border-color {
    border-color: var(--color-border) !important;
  }

  /* Update card styles for dark mode */
  .card {
    background-color: var(--color-surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  [data-theme="dark"] .card {
    box-shadow: 0 4px 6px var(--card-shadow);
  }

  /* Footer */
  footer {
    background-color: var(--color-primary);
    transition: background-color 0.3s ease;
  }

  [data-theme="dark"] footer {
    background-color: var(--color-surface);
  }

  /* Secondary text on dark accent backgrounds */
  [data-theme="dark"] .text-stone {
    color: var(--color-secondary);
  }

  /* Version display in footer */
  .version-display {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .version-display:hover {
    opacity: 1;
  }

  /* Navigation Dark Mode */
  nav {
    background-color: var(--color-surface);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  [data-theme="dark"] nav {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  /* Custom dark mode specific styles */
  [data-theme="dark"] .skill-tag {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

  [data-theme="dark"] .nav-link {
    color: var(--color-text-primary);
  }

  /* Enhanced styles for specific components in dark mode */
  [data-theme="dark"] .bg-white {
    background-color: var(--color-surface);
  }

  [data-theme="dark"] .border-gray-200 {
    border-color: var(--color-border);
  }

  [data-theme="dark"] .text-ink {
    color: var(--color-primary);
  }

  [data-theme="dark"] .project-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }

  [data-theme="dark"] .tech-tag {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
  }

  /* Dark mode form inputs */
  [data-theme="dark"] .form-input {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

  [data-theme="dark"] .form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(231, 229, 228, 0.2);
  }

  /* Dark mode buttons */
  [data-theme="dark"] .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border: 1px solid var(--color-primary);
  }

  [data-theme="dark"] .btn-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    opacity: 0.85;
  }

  [data-theme="dark"] .btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }

  [data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
  }

  /* Dark mode animated elements */
  [data-theme="dark"] .animate-spin {
    border-color: var(--color-primary);
  }

  /* Dark mode section dividers */
  [data-theme="dark"] .section-divider {
    background-color: var(--color-border);
  }

  /* Skip navigation link for 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;
  }

  .sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Enhanced focus styles for better accessibility */
  :focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  /* High contrast focus for interactive elements */
  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.1);
  }

  [data-theme="dark"] button:focus,
  [data-theme="dark"] a:focus,
  [data-theme="dark"] input:focus,
  [data-theme="dark"] textarea:focus,
  [data-theme="dark"] select:focus {
    outline-color: var(--color-focus-ring);
    box-shadow: 0 0 0 4px rgba(231, 229, 228, 0.3);
  }

  /* Ensure sufficient color contrast for error messages */
  .error-message {
    color: #DC2626;
  }

  [data-theme="dark"] .error-message {
    color: #FCA5A5;
  }

  /* Improved button hover states for accessibility */
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--color-primary);
    color: var(--color-surface);
    transform: translateY(-1px);
  }

  .btn-secondary:hover,
  .btn-secondary:focus {
    background-color: var(--color-hover);
    transform: translateY(-1px);
  }

  /* Enhanced mobile menu accessibility */
  #mobile-menu {
    transition: all 0.3s ease;
  }

  /* Form validation feedback */
  .form-input[aria-invalid="true"] {
    border-color: #DC2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
  }

  [data-theme="dark"] .form-input[aria-invalid="true"] {
    border-color: #FCA5A5;
    box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.2);
  }

  /* Enhanced dark mode text contrast fixes */
  [data-theme="dark"] .text-text-light {
    color: var(--color-text-secondary) !important;
  }

  [data-theme="dark"] .text-text-dark {
    color: var(--color-text-primary) !important;
  }

  [data-theme="dark"] .text-stone {
    color: var(--color-secondary) !important;
  }

  /* Dark mode specific Tailwind overrides */
  [data-theme="dark"] .text-gray-500 {
    color: var(--color-text-secondary) !important;
  }

  [data-theme="dark"] .text-gray-600 {
    color: var(--color-text-secondary) !important;
  }

  [data-theme="dark"] .text-gray-700 {
    color: var(--color-text-primary) !important;
  }

  [data-theme="dark"] .text-green-700 {
    color: #4ADE80 !important; /* High contrast green for success messages */
  }

  [data-theme="dark"] .bg-green-100 {
    background-color: #064E3B !important;
    border-color: #059669 !important;
  }

  [data-theme="dark"] .bg-stone-base {
    background-color: var(--color-surface) !important;
  }

  [data-theme="dark"] .bg-stone-light {
    background-color: var(--color-hover) !important;
  }

  /* Dark mode carousel improvements */
  [data-theme="dark"] .carousel-nav {
    background: rgba(250, 250, 249, 0.9) !important;
    color: var(--color-bg) !important;
  }

  [data-theme="dark"] .carousel-nav:hover {
    background: rgba(250, 250, 249, 1) !important;
  }

  [data-theme="dark"] .carousel-indicator {
    background: rgba(250, 250, 249, 0.5) !important;
  }

  [data-theme="dark"] .carousel-indicator:hover {
    background: rgba(250, 250, 249, 0.8) !important;
  }

  [data-theme="dark"] .carousel-indicator.active {
    background: #FAFAF9 !important;
  }

  /* Dark mode social card improvements */
  [data-theme="dark"] .social-card .bg-white {
    background-color: var(--color-surface) !important;
  }

  /* Dark mode version display */
  [data-theme="dark"] .version-display {
    color: var(--color-secondary) !important;
  }

  /* Dark mode loading states */
  [data-theme="dark"] .border-t-2 {
    border-top-color: var(--color-primary) !important;
  }

  [data-theme="dark"] .border-b-2 {
    border-bottom-color: var(--color-primary) !important;
  }

  /* Dark mode hover states for links */
  [data-theme="dark"] a:hover {
    color: var(--color-primary) !important;
  }

  /* Ensure proper contrast for all headings */
  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  [data-theme="dark"] h4,
  [data-theme="dark"] h5,
  [data-theme="dark"] h6 {
    color: var(--color-text-primary) !important;
  }

  /* Dark mode form labels */
  [data-theme="dark"] .form-label {
    color: var(--color-text-primary) !important;
  }

  /* Dark mode nav link active state */
  [data-theme="dark"] .nav-link.active:after {
    background-color: var(--color-primary) !important;
  }

  [data-theme="dark"] .nav-link:hover:after {
    background-color: var(--color-secondary) !important;
  }

/* Social card text in dark mode */
[data-theme="dark"] .social-card .text-stone {
  color: var(--color-secondary) !important;
}