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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Modern B2B SaaS color scheme with dark theme */
    --background: 215 28% 7%;
    --foreground: 0 0% 98%;

    --card: 215 25% 9%;
    --card-foreground: 0 0% 98%;

    --popover: 215 25% 9%;
    --popover-foreground: 0 0% 98%;

    --primary: 355 100% 75%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 355 100% 80%;

    --secondary: 215 20% 15%;
    --secondary-foreground: 0 0% 98%;

    --muted: 215 20% 12%;
    --muted-foreground: 215 15% 65%;

    --accent: 355 100% 75%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 215 20% 18%;
    --input: 215 20% 15%;
    --ring: 355 100% 75%;

    --radius: 0.75rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(355, 100%, 75%), hsl(350, 95%, 70%));
    --gradient-hero: linear-gradient(135deg, hsl(215, 28%, 7%), hsl(215, 25%, 12%));
    --gradient-card: linear-gradient(135deg, hsl(215, 25%, 9%), hsl(215, 20%, 12%));
    --gradient-subtle: linear-gradient(180deg, hsl(215, 25%, 9%), hsl(215, 20%, 8%));

    /* Shadows */
    --shadow-elegant: 0 20px 50px -10px hsl(355, 100%, 75%, 0.2);
    --shadow-glow: 0 0 40px hsl(355, 100%, 80%, 0.15);
    --shadow-card: 0 8px 32px hsl(0, 0%, 0%, 0.3);

    /* Glass effect */
    --glass-bg: hsla(215, 25%, 12%, 0.8);
    --glass-border: hsla(215, 20%, 18%, 0.6);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .light {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 355 100% 65%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 43.5%;
    --accent: 355 100% 65%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 355 100% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
  }

  body {
    @apply bg-background text-foreground;
    background: var(--gradient-hero);
    min-height: 100vh;
  }

  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hover-glow:hover {
    box-shadow: var(--shadow-glow);
    transition: var(--transition-smooth);
  }

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

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

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

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px hsl(355, 100%, 75%, 0.3); }
    50% { box-shadow: 0 0 40px hsl(355, 100%, 75%, 0.6); }
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .animate-scroll-left {
    animation: scroll-left 25s linear infinite;
  }

  /* Light section backgrounds for contrast */
  .section-light {
    background: hsl(0, 0%, 98%);
    color: hsl(222.2, 84%, 4.9%);
  }

  .section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5, .section-light h6 {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light p {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light span {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light .text-muted-foreground {
    color: hsl(215.4, 16.3%, 40%) !important;
  }

  .section-light .gradient-text {
    background: linear-gradient(135deg, hsl(355, 100%, 65%), hsl(350, 95%, 60%)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .section-light .glass-card {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.08);
  }

  .section-light .glass-card:hover {
    border-color: hsl(355, 100%, 65%);
    box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.12);
  }

  .section-subtle {
    background: hsl(0, 0%, 96%);
    color: hsl(222.2, 84%, 4.9%);
  }

  .section-subtle h1, .section-subtle h2, .section-subtle h3, .section-subtle h4, .section-subtle h5, .section-subtle h6 {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle p {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle span {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle .text-muted-foreground {
    color: hsl(215.4, 16.3%, 40%) !important;
  }

  .section-subtle .gradient-text {
    background: linear-gradient(135deg, hsl(355, 100%, 65%), hsl(350, 95%, 60%)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .section-subtle .glass-card {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.08);
  }

  .section-subtle .glass-card:hover {
    border-color: hsl(355, 100%, 65%);
    box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.12);
  }

  /* Button styles for light sections - only for outline and ghost variants (using data-variant) */
  .section-light button[data-variant="outline"],
  .section-light button[data-variant="ghost"],
  .section-subtle button[data-variant="outline"],
  .section-subtle button[data-variant="ghost"] {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light button[data-variant="outline"]:hover,
  .section-light button[data-variant="ghost"]:hover,
  .section-subtle button[data-variant="outline"]:hover,
  .section-subtle button[data-variant="ghost"]:hover {
    color: hsl(0, 0%, 98%) !important;
    background-color: hsl(355, 100%, 65%) !important;
  }

  /* Dark neon section styles */
  .section-dark {
    background: linear-gradient(135deg, hsl(222, 47%, 11%) 0%, hsl(220, 26%, 3%) 100%);
    color: hsl(0, 0%, 98%);
  }

  .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 {
    color: hsl(0, 0%, 98%) !important;
  }

  .section-dark p, .section-dark span, .section-dark li {
    color: hsl(215, 20%, 85%) !important;
  }

  /* Neon border effects */
  .neon-border-pink {
    border: 2px solid hsla(330, 81%, 60%, 0.6);
    box-shadow: 0 0 20px hsla(330, 81%, 60%, 0.4),
                inset 0 0 20px hsla(330, 81%, 60%, 0.1);
  }

  .neon-border-cyan {
    border: 2px solid hsla(187, 85%, 53%, 0.6);
    box-shadow: 0 0 20px hsla(187, 85%, 53%, 0.4),
                inset 0 0 20px hsla(187, 85%, 53%, 0.1);
  }

  .neon-border-purple {
    border: 2px solid hsla(280, 70%, 65%, 0.6);
    box-shadow: 0 0 20px hsla(280, 70%, 65%, 0.4),
                inset 0 0 20px hsla(280, 70%, 65%, 0.1);
  }

  /* Glow effects */
  .glow-pink {
    box-shadow: 0 0 40px hsla(330, 81%, 60%, 0.5);
  }

  .glow-cyan {
    box-shadow: 0 0 40px hsla(187, 85%, 53%, 0.5);
  }

  /* Mockup tilt effect */
  .mockup-tilt {
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg);
    transition: transform 0.4s ease;
  }

  .mockup-tilt:hover {
    transform: perspective(1000px) rotateY(-6deg) rotateX(2deg) scale(1.02);
  }

  /* Pulse glow animation for neon borders */
  @keyframes pulse-neon-pink {
    0%, 100% { 
      box-shadow: 0 0 20px hsla(330, 81%, 60%, 0.4),
                  inset 0 0 20px hsla(330, 81%, 60%, 0.1);
    }
    50% { 
      box-shadow: 0 0 40px hsla(330, 81%, 60%, 0.7),
                  inset 0 0 30px hsla(330, 81%, 60%, 0.2);
    }
  }

  @keyframes pulse-neon-cyan {
    0%, 100% { 
      box-shadow: 0 0 20px hsla(187, 85%, 53%, 0.4),
                  inset 0 0 20px hsla(187, 85%, 53%, 0.1);
    }
    50% { 
      box-shadow: 0 0 40px hsla(187, 85%, 53%, 0.7),
                  inset 0 0 30px hsla(187, 85%, 53%, 0.2);
    }
  }

  .animate-pulse-neon-pink {
    animation: pulse-neon-pink 3s ease-in-out infinite;
  }

  .animate-pulse-neon-cyan {
    animation: pulse-neon-cyan 3s ease-in-out infinite;
  }

  /* Performance optimizations - prevent forced reflows */
  header {
    will-change: transform;
    contain: layout;
  }

  section {
    contain: layout style;
  }

  /* Optimize carousel and animated elements */
  [class*="carousel"],
  [class*="embla"],
  .animate-scroll-left {
    will-change: transform;
    transform: translateZ(0);
    contain: layout;
  }

  /* Optimize scroll containers */
  [class*="scroll"] {
    will-change: scroll-position;
  }

  /* Optimize animated elements */
  .animate-float,
  .animate-pulse-glow,
  .animate-pulse-neon-pink,
  .animate-pulse-neon-cyan {
    will-change: transform, box-shadow;
    transform: translateZ(0);
  }

  /* Optimize hover effects */
  .hover-glow {
    contain: layout;
  }

  /* Article content styles for blog posts */
  .article-content {
    @apply text-foreground/90;
    font-feature-settings: "palt" 1;
    line-height: 1.9;
    letter-spacing: 0.02em;
  }

  .article-content h2 {
    @apply text-3xl font-bold mt-16 mb-6 pb-4 border-b-2 border-border;
    scroll-margin-top: 100px;
  }

  .article-content h3 {
    @apply text-2xl font-bold mt-12 mb-5 pl-5 border-l-4 border-primary;
    scroll-margin-top: 100px;
  }

  .article-content h4 {
    @apply text-xl font-semibold mt-10 mb-4;
    scroll-margin-top: 100px;
  }

  .article-content p {
    @apply mb-6 text-lg leading-relaxed;
  }

  .article-content a {
    @apply text-primary font-medium underline decoration-primary/30 underline-offset-4 transition-colors;
  }

  .article-content a:hover {
    @apply decoration-primary;
  }

  .article-content ul,
  .article-content ol {
    @apply my-6 pl-6 space-y-3;
  }

  .article-content li {
    @apply text-lg leading-relaxed;
  }

  .article-content code {
    @apply bg-muted px-2 py-1 rounded text-sm font-mono border border-border;
  }

.article-content pre {
  @apply rounded-lg border border-border overflow-hidden my-6;
  /* react-syntax-highlighterが独自のスタイルを持つため、背景とpaddingは削除 */
}

.article-content pre code {
  /* highlight.jsのテーマがpadding/backgroundを管理 */
  font-size: 0.95rem;
  line-height: 1.7;
}

/* シンタックスハイライター用のカスタムスタイル */
.article-content pre > div {
  @apply rounded-lg;
}

  .article-content blockquote {
    @apply border-l-4 border-primary bg-muted/50 py-4 px-6 my-6 italic;
  }

  .article-content img {
    @apply rounded-lg shadow-md my-8;
  }

  .article-content hr {
    @apply my-12 border-border;
  }

  .article-content table {
    @apply w-full my-8 border-collapse;
  }

  .article-content th {
    @apply bg-muted px-4 py-3 text-left font-semibold border border-border;
  }

  .article-content td {
    @apply px-4 py-3 border border-border;
  }

  @media (prefers-color-scheme: dark) {
    .article-content {
      @apply text-foreground/85;
    }
    
    .article-content code {
      @apply bg-muted/80;
    }
    
    /* highlight.jsのテーマが背景を管理するため、preの背景色を削除 */
  }

  /* Skill Hiring Page Specific Styles */
  .skill-hiring-page {
    background: #0a0e27;
    position: relative;
    overflow-x: hidden;
  }

  .skill-hiring-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }

  .skill-hiring-section {
    position: relative;
    z-index: 1;
  }

  .diagonal-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .diagonal-lines::before,
  .diagonal-lines::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transform: rotate(-15deg);
  }

  .diagonal-lines::before {
    top: 20%;
    left: -50%;
  }

  .diagonal-lines::after {
    top: 60%;
    left: -30%;
  }

  .circle-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
  }

  .circle-glow-blue {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
  }

  .circle-glow-purple {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  }

  .skill-hiring-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .skill-hiring-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(252, 108, 131, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(252, 108, 131, 0.2);
  }

  .skill-hiring-cta {
    background-color: #fc6c83 !important;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
  }

  .skill-hiring-cta:hover {
    background-color: #ff7a92 !important;
    box-shadow: 0 8px 24px rgba(252, 108, 131, 0.4);
    transform: translateY(-2px);
  }
}