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

/* iOS 26 Design System - Global Styles */
@layer base {
  :root {
    --ios-primary: #007AFF;
    --ios-secondary: #5856D6;
    --ios-success: #34C759;
    --ios-warning: #FF9500;
    --ios-danger: #FF3B30;
    --ios-gray-1: #F2F2F7;
    --ios-gray-2: #E5E5EA;
    --ios-gray-3: #D1D1D6;
    --ios-gray-4: #C7C7CC;
    --ios-gray-5: #AEAEB2;
    --ios-gray-6: #8E8E93;
    --ios-surface: rgba(255, 255, 255, 0.92);
    --ios-surface-secondary: rgba(242, 242, 247, 0.8);
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F7;
  }

  /* iOS-style Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: all 0.2s ease;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
}

@layer components {
  /* iOS 26 Glass Effects */
  .ios-glass {
    background: var(--ios-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 4px 16px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .ios-glass-secondary {
    background: var(--ios-surface-secondary);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.04),
      0 8px 32px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* iOS Interactive Elements */
  .ios-interactive {
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
  }
  
  .ios-interactive:hover {
    transform: scale(1.02) translateY(-1px);
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.08),
      0 12px 48px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .ios-interactive:active {
    transform: scale(0.98) translateY(0px);
    transition: all 0.1s ease;
  }

  /* iOS Interactive Elements - General */
  .ios-interactive:hover {
    transform: scale(1.02) translateY(-1px);
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.08),
      0 12px 48px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .ios-interactive:active {
    transform: scale(0.98) translateY(0px);
    transition: all 0.1s ease;
  }

  /* iOS Button Styles */
  .ios-button-primary {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    border: none;
    box-shadow: 
      0 2px 8px rgba(0, 122, 255, 0.25),
      0 8px 32px rgba(0, 122, 255, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .ios-button-secondary {
    background: var(--ios-surface);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    color: var(--ios-primary);
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.05),
      0 4px 16px rgba(0, 0, 0, 0.08);
  }

  /* iOS Typography */
  .ios-title-1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .ios-title-2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  .ios-title-3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .ios-headline {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  .ios-body {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
  }

  .ios-callout {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
  }

  .ios-subhead {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
  }

  .ios-footnote {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
  }

  .ios-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
  }
}