@import url('https://fonts.googleapis.com/css2?family=Tahoma&display=swap');



@tailwind base;

@tailwind components;

@tailwind utilities;



@layer base {

  :root {

    --background: 220 30% 12%;

    --foreground: 220 10% 85%;

    --card: 220 25% 18%;

    --card-foreground: 220 10% 90%;

    --popover: 220 25% 18%;

    --popover-foreground: 220 10% 90%;

    --primary: 210 82% 30%;

    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 25%;

    --secondary-foreground: 220 10% 85%;

    --muted: 220 15% 22%;

    --muted-foreground: 220 10% 60%;

    --accent: 45 80% 55%;

    --accent-foreground: 220 30% 10%;

    --destructive: 0 65% 50%;

    --destructive-foreground: 0 0% 100%;

    --border: 220 20% 30%;

    --input: 220 20% 28%;

    --ring: 210 60% 45%;

    --chart-1: 210 60% 45%;

    --chart-2: 160 50% 40%;

    --chart-3: 30 70% 50%;

    --chart-4: 280 55% 55%;

    --chart-5: 340 65% 50%;

    --radius: 0.25rem;

    --sidebar-background: 220 25% 15%;

    --sidebar-foreground: 220 10% 85%;

    --sidebar-primary: 210 60% 45%;

    --sidebar-primary-foreground: 0 0% 100%;

    --sidebar-accent: 220 15% 22%;

    --sidebar-accent-foreground: 220 10% 85%;

    --sidebar-border: 220 20% 30%;

    --sidebar-ring: 210 60% 45%;

  }



  .dark {

    --background: 220 30% 12%;

    --foreground: 220 10% 85%;

    --card: 220 25% 18%;

    --card-foreground: 220 10% 90%;

    --popover: 220 25% 18%;

    --popover-foreground: 220 10% 90%;

    --primary: 210 60% 45%;

    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 25%;

    --secondary-foreground: 220 10% 85%;

    --muted: 220 15% 22%;

    --muted-foreground: 220 10% 60%;

    --accent: 45 80% 55%;

    --accent-foreground: 220 30% 10%;

    --destructive: 0 65% 50%;

    --destructive-foreground: 0 0% 100%;

    --border: 220 20% 30%;

    --input: 220 20% 28%;

    --ring: 210 60% 45%;

    --chart-1: 210 60% 45%;

    --chart-2: 160 50% 40%;

    --chart-3: 30 70% 50%;

    --chart-4: 280 55% 55%;

    --chart-5: 340 65% 50%;

    --sidebar-background: 220 25% 15%;

    --sidebar-foreground: 220 10% 85%;

    --sidebar-primary: 210 60% 45%;

    --sidebar-primary-foreground: 0 0% 100%;

    --sidebar-accent: 220 15% 22%;

    --sidebar-accent-foreground: 220 10% 85%;

    --sidebar-border: 220 20% 30%;

    --sidebar-ring: 210 60% 45%;

  }

}



@layer base {

  * {

    @apply border-border outline-ring/50;

  }

  body {

    @apply bg-background text-foreground;

    font-family: Tahoma, Verdana, Geneva, sans-serif;

  }

}



/* 2010 retro styles */

.retro-bevel {

  border: 2px outset #6688aa;

}



.retro-inset {

  border: 2px inset #556677;

}



.retro-link {

  color: #5599dd;

  text-decoration: underline;

  font-size: 11px;

}

.retro-link:hover {

  color: #77bbff;

}



.retro-gradient {

  background: linear-gradient(180deg, #2a3a5c 0%, #1a2440 40%, #0f1825 100%);

}



.retro-header-gradient {

  background: linear-gradient(180deg, #3a5a8a 0%, #1e3355 100%);

  border-bottom: 1px solid #5577aa;

}



.retro-input {

  background-color: #d8dce6;

  border: 2px inset #889aaa;

  color: #111;

  font-family: Tahoma, Verdana, sans-serif;

  font-size: 12px;

  padding: 3px 5px;

}



.retro-input:focus {

  outline: 1px dotted #336699;

}



.retro-btn {

  background: linear-gradient(180deg, #c8d0dc 0%, #8899aa 100%);

  border: 2px outset #aabbcc;

  color: #1a2440;

  font-family: Tahoma, Verdana, sans-serif;

  font-size: 11px;

  font-weight: bold;

  padding: 4px 16px;

  cursor: pointer;

}

.retro-btn:hover {

  background: linear-gradient(180deg, #d8e0ec 0%, #99aacc 100%);

}

.retro-btn:active {

  border-style: inset;

}



.retro-panel {

  background: linear-gradient(180deg, #253550 0%, #1c2b42 100%);

  border: 1px solid #3a5577;

  box-shadow: 2px 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(100,140,200,0.15);

}



.retro-footer {

  border-top: 1px solid #334466;

  background: linear-gradient(180deg, #1a2840 0%, #111c2e 100%);

}



.retro-marquee {

  font-size: 10px;

  color: #7799bb;

  letter-spacing: 1px;

}



.blink-slow {

  animation: blink-slow 2s ease-in-out infinite;

}



@keyframes blink-slow {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.3; }

}



.retro-hr {

  border: none;

  height: 1px;

  background: linear-gradient(90deg, transparent, #4477aa, transparent);

}



.pixel-shadow {

  text-shadow: 1px 1px 0px rgba(0,0,0,0.7);

}



.visitor-counter {

  font-family: 'Courier New', monospace;

  background: #000;

  color: #00cc00;

  border: 1px inset #333;

  padding: 2px 8px;

  font-size: 11px;

}