@import "tailwindcss";
@import "../styles/performance.css";

:root {
  --background: #000000;
  --foreground: #171717;
  
  /* Da1TimeTable Color Palette - STRICT THEME ONLY */
  --color-primary-red: #fb1f24;
  --color-secondary-red: #f44e66;
  --color-primary-blue: #0171ec;
  --color-secondary-blue: #6abcff;
  --color-dark-navy: #0c133a;
  --color-white: #ffffff;
  
  /* High Contrast Text Colors for Accessibility */
  --text-primary: #ffffff;
  --text-secondary: #f3f4f6;
  --text-tertiary: #e5e7eb;
  --text-muted: #d1d5db;
  --text-inverse: #000000;
}

@layer base {
  :root {
    --font-sans: var(--font-inter), var(--font-source-sans-pro), var(--font-figtree), var(--font-geist-sans);
    --font-mono: var(--font-jetbrains-mono), var(--font-geist-mono);
    --font-display: var(--font-inter), var(--font-figtree), sans-serif;
  }
  
  * {
    font-family: var(--font-sans);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-source-sans-pro), var(--font-inter), var(--font-figtree), sans-serif;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

/* Light Typography Classes */
.font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0em;
}

.font-heading {
  font-family: var(--font-source-sans-pro), var(--font-inter), var(--font-figtree), sans-serif;
  font-weight: 600;
  letter-spacing: 0em;
}

.font-body {
  font-family: var(--font-inter), var(--font-source-sans-pro), sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.font-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}

/* Custom Animations */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(1, 113, 236, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(1, 113, 236, 0.6);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

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

.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.5s ease-out;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar - Theme Colors */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #0c133a, #0c133a);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #0171ec, #6abcff);
  border-radius: 10px;
  border: 2px solid #0c133a;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #fb1f24, #f44e66);
}

/* Bounce Animation */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Slide and Fade */
@keyframes slide-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-fade-up {
  animation: slide-fade-up 0.8s ease-out;
}

/* Rotate Scale */
@keyframes rotate-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.animate-rotate-scale {
  animation: rotate-scale 3s ease-in-out infinite;
}

/* Wave Animation */
@keyframes wave {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-10px) translateX(10px);
  }
  50% {
    transform: translateY(-20px) translateX(0);
  }
  75% {
    transform: translateY(-10px) translateX(-10px);
  }
}

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

/* Neon Glow - Theme Colors */
@keyframes neon-glow {
  0%, 100% {
    text-shadow: 0 0 10px #0171ec, 0 0 20px #0171ec, 0 0 30px #0171ec;
  }
  50% {
    text-shadow: 0 0 20px #6abcff, 0 0 30px #6abcff, 0 0 40px #6abcff;
  }
}

.animate-neon-glow {
  animation: neon-glow 2s ease-in-out infinite;
}

/* Spin Slow */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Wiggle */
@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(1.1);
  }
  20%, 40% {
    transform: scale(1);
  }
}

.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Shake */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Flip */
@keyframes flip {
  from {
    transform: perspective(400px) rotateY(0);
  }
  to {
    transform: perspective(400px) rotateY(360deg);
  }
}

.animate-flip {
  animation: flip 1s ease-in-out;
}

/* Zoom In Out */
@keyframes zoom-in-out {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-zoom-in-out {
  animation: zoom-in-out 2s ease-in-out infinite;
}

/* Gradient Animation */
@keyframes gradient-xy {
  0%, 100% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-xy 5s ease infinite;
}

/* High Contrast Text Utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

/* Accessibility Focus Styles */
/* Skip links */
.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;
}

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

/* Enhanced focus indicators for keyboard navigation only */
*:focus-visible {
  outline: 2px solid #0171ec;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(1, 113, 236, 0.3);
}

/* Button focus styles - keyboard only */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #0171ec;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(1, 113, 236, 0.2);
}

/* Skip links specific styling */
a[href="#main-content"]:focus,
a[href="#navigation"]:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #0171ec;
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.2s ease;
}

a[href="#main-content"]:hover,
a[href="#navigation"]:hover {
  background: #015bb5;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Modal focus trap styles */
[role="dialog"] *:focus {
  outline: 2px solid #0171ec;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tab indicator focus */
[role="tab"]:focus {
  outline: 2px solid #0171ec;
  outline-offset: 2px;
  background: rgba(1, 113, 236, 0.1);
}

/* Interactive card focus styles */
article[tabindex="0"]:focus {
  outline: 2px solid #0171ec;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(1, 113, 236, 0.2);
  transform: scale(1.02);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus,
  *:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Keep essential animations but make them subtle */
  .animate-float {
    animation: none;
  }
  
  .animate-fade-in {
    opacity: 1;
    animation: none;
  }
}