@import "tailwindcss";

/* ============================================
   GEOMETRIC PLAY DESIGN SYSTEM
   ============================================ */

/* Tailwind v4 Theme Extension - Custom Colors */
@theme {
  --color-geo-dark: #1A1B26;
  --color-geo-sidebar: #2D3047;
  --color-geo-coral: #E07A5F;
  --color-geo-sage: #81B29A;
  --color-geo-gold: #F2CC8F;
  --color-geo-muted: #6B6B7B;

  --font-display: "Archivo Black", sans-serif;
  --font-body: "Instrument Sans", sans-serif;

  --radius-geo: 4px;
  --radius-geo-lg: 8px;
  --radius-geo-avatar: 16px;
}

/* Custom breakpoint for mobile/desktop split */
@custom-media --desktop (min-width: 768px);

/* Base layer utilities */
@layer base {
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Selection color */
  ::selection {
    background-color: #E07A5F;
    color: white;
  }
}

/* Component utilities */
@layer components {
  /* Corner triangle accent - positioned absolute in top-right */
  .geo-corner-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-color: #E07A5F;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  .geo-corner-accent-sm {
    width: 40px;
    height: 40px;
  }

  .geo-corner-accent-lg {
    width: 80px;
    height: 80px;
  }

  /* Bottom-left corner accent */
  .geo-corner-accent-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background-color: #81B29A;
    clip-path: polygon(0 100%, 0 0, 100% 100%);
    opacity: 0.3;
  }

  /* Angular button clip-path */
  .geo-btn-angular {
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
  }

  /* Left border active indicator */
  .geo-active-border {
    border-left: 3px solid #81B29A;
    background-color: rgba(129, 178, 154, 0.15);
  }

  /* Card hover effect */
  .geo-card-hover {
    transition: background-color 0.2s ease;
  }

  .geo-card-hover:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Squared avatar style */
  .geo-avatar {
    border-radius: 16px;
    border: 2px solid #81B29A;
  }

  .geo-avatar-highlight {
    border-color: #E07A5F;
  }

  /* Section header style */
  .geo-section-title {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #E07A5F;
    font-size: 0.75rem;
  }

  /* Geometric badge */
  .geo-badge {
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: "JetBrains Mono", monospace;
  }
}

/* Utility additions */
@layer utilities {
  /* Text shadow for depth */
  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}