@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-text-base: 17, 24, 39;
    --color-text-muted: 107, 114, 128;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 249, 250, 251;
    --color-button-accent: 17, 24, 39;
    --color-button-accent-hover: 55, 65, 81;
    --color-button-muted: 229, 231, 235;
    --color: 37, 99, 235;
    --muted: 107, 114, 128;
    --color-highlight: 37, 99, 235;
    --color-secondary: 139, 92, 246;
    --color-tertiary: 236, 72, 153;
    --color-glass: 255, 255, 255;
  }

  [data-theme="blue"] {
    --color: 37, 99, 235;
    --muted: 107, 114, 128;
    --color-highlight: 37, 99, 235;
    --color-secondary: 139, 92, 246;
    --color-tertiary: 236, 72, 153;
  }

  [data-theme="red"] {
    --color: 220, 38, 38;
    --muted: 107, 114, 128;
    --color-highlight: 220, 38, 38;
    --color-secondary: 236, 72, 153;
    --color-tertiary: 139, 92, 246;
  }

  [data-theme="green"] {
    --color: 5, 150, 105;
    --muted: 107, 114, 128;
    --color-highlight: 5, 150, 105;
    --color-secondary: 16, 185, 129;
    --color-tertiary: 245, 158, 11;
  }

  [data-theme="cyber"] {
    --color: 0, 255, 157;
    --muted: 107, 114, 128;
    --color-highlight: 0, 255, 157;
    --color-secondary: 255, 0, 230;
    --color-tertiary: 0, 183, 255;
    --color-text-base: 220, 220, 220;
    --color-text-muted: 150, 150, 150;
    --color-text-inverted: 0, 0, 0;
    --color-fill: 10, 10, 20;
    --color-button-accent: 0, 255, 157;
    --color-button-accent-hover: 0, 200, 120;
    --color-button-muted: 30, 30, 50;
    --color-glass: 20, 20, 40;
  }

  [data-theme="light"] {
    --color-text-base: 17, 24, 39;
    --color-text-muted: 107, 114, 128;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 249, 250, 251;
    --color-button-accent: 17, 24, 39;
    --color-button-accent-hover: 55, 65, 81;
    --color-button-muted: 229, 231, 235;
    --color: 37, 99, 235;
    --muted: 107, 114, 128;
    --color-highlight: 37, 99, 235;
    --color-secondary: 139, 92, 246;
    --color-tertiary: 236, 72, 153;
    --color-glass: 255, 255, 255;
  }

  .dark {
    --color-text-base: 255, 255, 255;
    --color-text-muted: 156, 163, 175;
    --color-text-inverted: 17, 24, 39;
    --color-fill: 15, 23, 42;
    --color-button-accent: 255, 255, 255;
    --color-button-accent-hover: 212, 212, 216;
    --color-button-muted: 51, 65, 85;
    --color-glass: 30, 41, 59;
  }

  .dark[data-theme="blue"] {
    --color: 59, 130, 246;
    --muted: 156, 163, 175;
    --color-highlight: 59, 130, 246;
    --color-secondary: 139, 92, 246;
    --color-tertiary: 236, 72, 153;
  }

  .dark[data-theme="red"] {
    --color: 239, 68, 68;
    --muted: 156, 163, 175;
    --color-highlight: 239, 68, 68;
    --color-secondary: 236, 72, 153;
    --color-tertiary: 139, 92, 246;
  }

  .dark[data-theme="green"] {
    --color: 16, 185, 129;
    --muted: 156, 163, 175;
    --color-highlight: 16, 185, 129;
    --color-secondary: 5, 150, 105;
    --color-tertiary: 245, 158, 11;
  }

  .dark[data-theme="cyber"] {
    --color: 0, 255, 157;
    --muted: 100, 100, 120;
    --color-highlight: 0, 255, 157;
    --color-secondary: 255, 0, 230;
    --color-tertiary: 0, 183, 255;
    --color-text-base: 220, 220, 220;
    --color-text-muted: 150, 150, 150;
    --color-text-inverted: 0, 0, 0;
    --color-fill: 10, 10, 20;
    --color-button-accent: 0, 255, 157;
    --color-button-accent-hover: 0, 200, 120;
    --color-button-muted: 30, 30, 50;
    --color-glass: 20, 20, 40;
  }
}

@layer components {
  .glass-panel {
    background-color: rgba(var(--color-glass), 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--color-glass), 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  [data-theme="cyber"] .glass-panel {
    background-color: rgba(var(--color-glass), 0.15);
    border: 1px solid rgba(var(--color-highlight), 0.3);
    box-shadow: 0 0 20px rgba(var(--color-highlight), 0.2);
    position: relative;
    overflow: hidden;
  }

  [data-theme="cyber"] .glass-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--color-highlight), 0.5) 50%,
      transparent 100%
    );
    animation: cyber-scan 3s linear infinite;
  }

  [data-theme="cyber"] .glass-panel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--color-secondary), 0.5) 50%,
      transparent 100%
    );
    animation: cyber-scan-reverse 4s linear infinite;
  }

  @keyframes cyber-scan {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(1000%);
      opacity: 0;
    }
  }

  @keyframes cyber-scan-reverse {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  [data-theme="cyber"] .section-title {
    position: relative;
    color: rgba(var(--color-highlight), 1);
    text-shadow: 0 0 10px rgba(var(--color-highlight), 0.7);
  }

  [data-theme="cyber"] .section-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(var(--color-secondary), 0.8);
    text-shadow: 0 0 5px rgba(var(--color-secondary), 0.5);
    z-index: -1;
    animation: cyber-glitch 3s infinite alternate;
  }

  @keyframes cyber-glitch {
    0%,
    100% {
      clip-path: inset(0 0 0 0);
      transform: translate(0);
    }
    20% {
      clip-path: inset(20% 0 20% 0);
      transform: translate(-2px, 2px);
    }
    40% {
      clip-path: inset(40% 0 40% 0);
      transform: translate(2px, -2px);
    }
    60% {
      clip-path: inset(60% 0 30% 0);
      transform: translate(0);
    }
    80% {
      clip-path: inset(10% 0 80% 0);
      transform: translate(2px, 2px);
    }
  }

  [data-theme="cyber"] a:hover {
    color: rgba(var(--color-highlight), 1);
    text-shadow: 0 0 8px rgba(var(--color-highlight), 0.7);
  }

  [data-theme="cyber"] .glow-border::after {
    background: linear-gradient(
      45deg,
      rgba(var(--color-highlight), 0.7),
      transparent,
      rgba(var(--color-secondary), 0.7)
    );
    animation: cyber-border-pulse 3s infinite;
  }

  @keyframes cyber-border-pulse {
    0%,
    100% {
      opacity: 0.5;
      filter: blur(8px);
    }
    50% {
      opacity: 0.8;
      filter: blur(12px);
    }
  }

  [data-theme="cyber"] .social-icon {
    border: 1px solid rgba(var(--color-highlight), 0.4);
    box-shadow: 0 0 10px rgba(var(--color-highlight), 0.2) inset;
  }

  [data-theme="cyber"] .social-icon:hover {
    background-color: rgba(var(--color-highlight), 0.2);
    border-color: rgba(var(--color-highlight), 0.8);
    box-shadow: 0 0 15px rgba(var(--color-highlight), 0.5);
  }

  /* Additional Cyber Theme Effects */
  [data-theme="cyber"] h1,
  [data-theme="cyber"] h2,
  [data-theme="cyber"] h3,
  [data-theme="cyber"] h4 {
    position: relative;
    text-shadow: 0 0 8px rgba(var(--color-highlight), 0.5);
  }

  [data-theme="cyber"] h1::before,
  [data-theme="cyber"] h2::before,
  [data-theme="cyber"] h3::before,
  [data-theme="cyber"] h4::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(var(--color-highlight), 0.3);
    z-index: -1;
    animation: cyber-text-pulse 4s ease-in-out infinite;
  }

  @keyframes cyber-text-pulse {
    0%,
    100% {
      opacity: 0.3;
      transform: translateX(-2px);
    }
    50% {
      opacity: 0.7;
      transform: translateX(2px);
    }
  }

  [data-theme="cyber"] .project-card {
    border: 1px solid rgba(var(--color-highlight), 0.3);
    box-shadow: 0 0 20px rgba(var(--color-highlight), 0.1);
    position: relative;
    overflow: hidden;
  }

  [data-theme="cyber"] .project-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
      45deg,
      rgba(var(--color-highlight), 0.3),
      rgba(var(--color-secondary), 0.3),
      rgba(var(--color-tertiary), 0.3),
      rgba(var(--color-highlight), 0.3)
    );
    z-index: -1;
    animation: cyber-border-rotate 10s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  [data-theme="cyber"] .project-card:hover::before {
    opacity: 1;
  }

  @keyframes cyber-border-rotate {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 300% 0%;
    }
  }

  [data-theme="cyber"] .skill-badge {
    border: 1px solid rgba(var(--color-highlight), 0.3);
    background-color: rgba(var(--color-glass), 0.2);
    position: relative;
    overflow: hidden;
  }

  [data-theme="cyber"] .skill-badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      transparent,
      transparent,
      transparent,
      rgba(var(--color-highlight), 0.1)
    );
    transform: rotate(30deg);
    animation: cyber-skill-shine 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  [data-theme="cyber"] .skill-badge:hover::after {
    opacity: 1;
  }

  @keyframes cyber-skill-shine {
    0% {
      transform: rotate(30deg) translateY(100%);
    }
    100% {
      transform: rotate(30deg) translateY(-100%);
    }
  }

  [data-theme="cyber"] .code-block {
    border: 1px solid rgba(var(--color-highlight), 0.3);
    background-color: rgba(10, 10, 20, 0.7);
    position: relative;
  }

  [data-theme="cyber"] .code-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(var(--color-highlight), 0.03) 0px,
      rgba(var(--color-highlight), 0.03) 1px,
      transparent 1px,
      transparent 2px
    );
    pointer-events: none;
  }

  [data-theme="cyber"] .code-toggle {
    border: 1px solid rgba(var(--color-highlight), 0.3);
    background-color: rgba(10, 10, 20, 0.7);
  }

  [data-theme="cyber"] .code-toggle:hover {
    border-color: rgba(var(--color-highlight), 0.6);
    box-shadow: 0 0 10px rgba(var(--color-highlight), 0.3);
  }

  [data-theme="cyber"] .line-number {
    color: rgba(var(--color-highlight), 0.7);
  }

  [data-theme="cyber"] .floating-action-button {
    background: linear-gradient(
      135deg,
      rgba(var(--color-highlight), 1),
      rgba(var(--color-secondary), 0.8)
    );
    box-shadow: 0 0 20px rgba(var(--color-highlight), 0.5);
    position: relative;
    overflow: hidden;
  }

  [data-theme="cyber"] .floating-action-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle at center,
      rgba(var(--color-highlight), 0.5),
      transparent 70%
    );
    animation: cyber-button-pulse 3s ease-in-out infinite;
  }

  @keyframes cyber-button-pulse {
    0%,
    100% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    50% {
      opacity: 0.6;
      transform: scale(1);
    }
  }
}