@layer base, components, utilities;

@layer base {
  :root {
    --primary: oklch(0.6 0.18 250);
    --secondary: oklch(0.65 0.22 300);
    --accent: oklch(0.7 0.15 150);
    --background: oklch(0.98 0.01 200);
    --foreground: oklch(0.2 0.02 200);
    --card-bg: oklch(1 0 0);
    --border: oklch(0.9 0.01 200);
    --shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
    --shadow-deep: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1000;
  }

  h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 800;
  }
}

@layer components {
  .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-decoration: none;
  }

  .btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 14px 0 oklch(0.6 0.18 250 / 0.39), 0 0 20px oklch(0.6 0.18 250 / 0.2);
  }

  .btn-primary:hover {
    background-color: oklch(0.55 0.18 250);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 oklch(0.6 0.18 250 / 0.45), 0 0 30px oklch(0.6 0.18 250 / 0.3);
  }

  .card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.05), 0 4px 6px -4px oklch(0 0 0 / 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .card:hover {
    box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.15);
    transform: translateY(-8px) scale(1.02);
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .mt-4 { margin-top: 1rem; }
  .mb-4 { margin-bottom: 1rem; }
}