/* GROLL TEAM LINK PRO - Apple Design System CSS Base */
/* Version 1.0 - Foundation Styles */

:root {
  /* Apple-inspired Color Palette */
  --groll-black: #1d1d1f;
  --groll-white: #ffffff;
  --groll-gray-1: #f5f5f7;
  --groll-gray-2: #e8e8ed;
  --groll-gray-3: #d2d2d7;
  --groll-gray-4: #86868b;
  --groll-gray-5: #515154;
  
  /* Accent Colors */
  --groll-blue: #0071e3;
  --groll-blue-hover: #0077ed;
  --groll-green: #34c759;
  --groll-orange: #ff9500;
  --groll-red: #ff3b30;
  --groll-purple: #af52de;
  --groll-yellow: #ffcc00;
  
  /* Shadows */
  --groll-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --groll-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --groll-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --groll-shadow-xl: 0 12px 48px rgba(0,0,0,0.16);
  
  /* Typography */
  --groll-font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --groll-font-mono: "SF Mono", Monaco, "Courier New", monospace;
  
  /* Spacing */
  --groll-space-xs: 4px;
  --groll-space-sm: 8px;
  --groll-space-md: 16px;
  --groll-space-lg: 24px;
  --groll-space-xl: 32px;
  --groll-space-2xl: 48px;
  --groll-space-3xl: 64px;
  
  /* Border Radius */
  --groll-radius-sm: 6px;
  --groll-radius-md: 12px;
  --groll-radius-lg: 18px;
  --groll-radius-xl: 24px;
  --groll-radius-full: 9999px;
  
  /* Transitions */
  --groll-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --groll-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --groll-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --groll-z-base: 1;
  --groll-z-dropdown: 10;
  --groll-z-sticky: 20;
  --groll-z-modal: 30;
  --groll-z-notification: 40;
}

/* Global Reset & Base Styles */
.groll-system * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.groll-system {
  font-family: var(--groll-font-primary);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  color: var(--groll-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Classes */
.groll-headline {
  font-size: 48px;
  line-height: 1.08349;
  font-weight: 600;
  letter-spacing: -0.003em;
}

.groll-headline-2 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
}

.groll-headline-3 {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
}

.groll-title {
  font-size: 28px;
  line-height: 1.14286;
  font-weight: 600;
  letter-spacing: 0.007em;
}

.groll-title-2 {
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 600;
  letter-spacing: 0.009em;
}

.groll-title-3 {
  font-size: 21px;
  line-height: 1.19048;
  font-weight: 600;
  letter-spacing: 0.011em;
}

.groll-body {
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
}

.groll-body-sm {
  font-size: 15px;
  line-height: 1.46667;
  font-weight: 400;
  letter-spacing: -0.016em;
}

.groll-caption {
  font-size: 13px;
  line-height: 1.38462;
  font-weight: 400;
  letter-spacing: -0.008em;
}

/* Card Component */
.groll-card {
  background: var(--groll-white);
  border-radius: var(--groll-radius-lg);
  box-shadow: var(--groll-shadow-md);
  overflow: hidden;
  transition: all var(--groll-transition-base);
  position: relative;
}

.groll-card:hover {
  box-shadow: var(--groll-shadow-lg);
  transform: translateY(-2px);
}

.groll-card-header {
  padding: var(--groll-space-lg);
  border-bottom: 1px solid var(--groll-gray-2);
}

.groll-card-body {
  padding: var(--groll-space-lg);
}

.groll-card-footer {
  padding: var(--groll-space-lg);
  border-top: 1px solid var(--groll-gray-2);
  background: var(--groll-gray-1);
}

/* Button Component */
.groll-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47059;
  border-radius: var(--groll-radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--groll-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.groll-button-primary {
  background: var(--groll-blue);
  color: var(--groll-white);
}

.groll-button-primary:hover {
  background: var(--groll-blue-hover);
  box-shadow: var(--groll-shadow-md);
}

.groll-button-secondary {
  background: var(--groll-gray-1);
  color: var(--groll-black);
}

.groll-button-secondary:hover {
  background: var(--groll-gray-2);
}

.groll-button-ghost {
  background: transparent;
  color: var(--groll-blue);
  border: 1px solid var(--groll-gray-3);
}

.groll-button-ghost:hover {
  border-color: var(--groll-blue);
  background: rgba(0, 113, 227, 0.04);
}

/* Badge Component */
.groll-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--groll-radius-full);
  line-height: 1;
}

.groll-badge-blue {
  background: rgba(0, 113, 227, 0.1);
  color: var(--groll-blue);
}

.groll-badge-green {
  background: rgba(52, 199, 89, 0.1);
  color: var(--groll-green);
}

.groll-badge-orange {
  background: rgba(255, 149, 0, 0.1);
  color: var(--groll-orange);
}

.groll-badge-red {
  background: rgba(255, 59, 48, 0.1);
  color: var(--groll-red);
}

.groll-badge-purple {
  background: rgba(175, 82, 222, 0.1);
  color: var(--groll-purple);
}

/* Grid System */
.groll-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--groll-space-lg);
}

.groll-grid {
  display: grid;
  gap: var(--groll-space-lg);
}

.groll-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.groll-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.groll-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive */
@media (max-width: 768px) {
  .groll-grid-2,
  .groll-grid-3,
  .groll-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .groll-headline {
    font-size: 32px;
  }
  
  .groll-headline-2 {
    font-size: 28px;
  }
  
  .groll-headline-3 {
    font-size: 24px;
  }
}

/* Utility Classes */
.groll-text-center { text-align: center; }
.groll-text-left { text-align: left; }
.groll-text-right { text-align: right; }

.groll-mt-xs { margin-top: var(--groll-space-xs); }
.groll-mt-sm { margin-top: var(--groll-space-sm); }
.groll-mt-md { margin-top: var(--groll-space-md); }
.groll-mt-lg { margin-top: var(--groll-space-lg); }
.groll-mt-xl { margin-top: var(--groll-space-xl); }

.groll-mb-xs { margin-bottom: var(--groll-space-xs); }
.groll-mb-sm { margin-bottom: var(--groll-space-sm); }
.groll-mb-md { margin-bottom: var(--groll-space-md); }
.groll-mb-lg { margin-bottom: var(--groll-space-lg); }
.groll-mb-xl { margin-bottom: var(--groll-space-xl); }

/* Animations */
@keyframes groll-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.groll-animate-in {
  animation: groll-fade-in var(--groll-transition-base) ease-out;
}

/* Loading State */
.groll-skeleton {
  background: linear-gradient(90deg, var(--groll-gray-2) 25%, var(--groll-gray-1) 50%, var(--groll-gray-2) 75%);
  background-size: 200% 100%;
  animation: groll-skeleton-loading 1.5s infinite;
  border-radius: var(--groll-radius-sm);
}

@keyframes groll-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}