@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

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

@layer base {
  :root {
    /* Primary Colors - Trust-building corporate blue */
    --color-primary: #2563EB; /* blue-600 */
    --color-primary-50: #EFF6FF; /* blue-50 */
    --color-primary-100: #DBEAFE; /* blue-100 */
    --color-primary-200: #BFDBFE; /* blue-200 */
    --color-primary-300: #93C5FD; /* blue-300 */
    --color-primary-400: #60A5FA; /* blue-400 */
    --color-primary-500: #3B82F6; /* blue-500 */
    --color-primary-600: #2563EB; /* blue-600 */
    --color-primary-700: #1D4ED8; /* blue-700 */
    --color-primary-800: #1E40AF; /* blue-800 */
    --color-primary-900: #1E3A8A; /* blue-900 */
    --color-primary-foreground: #FFFFFF; /* white */

    /* Secondary Colors - Professional purple */
    --color-secondary: #7C3AED; /* violet-600 */
    --color-secondary-50: #F5F3FF; /* violet-50 */
    --color-secondary-100: #EDE9FE; /* violet-100 */
    --color-secondary-200: #DDD6FE; /* violet-200 */
    --color-secondary-300: #C4B5FD; /* violet-300 */
    --color-secondary-400: #A78BFA; /* violet-400 */
    --color-secondary-500: #8B5CF6; /* violet-500 */
    --color-secondary-600: #7C3AED; /* violet-600 */
    --color-secondary-700: #6D28D9; /* violet-700 */
    --color-secondary-800: #5B21B6; /* violet-800 */
    --color-secondary-900: #4C1D95; /* violet-900 */
    --color-secondary-foreground: #FFFFFF; /* white */

    /* Accent Colors - Indonesian red */
    --color-accent: #DC2626; /* red-600 */
    --color-accent-50: #FEF2F2; /* red-50 */
    --color-accent-100: #FEE2E2; /* red-100 */
    --color-accent-200: #FECACA; /* red-200 */
    --color-accent-300: #FCA5A5; /* red-300 */
    --color-accent-400: #F87171; /* red-400 */
    --color-accent-500: #EF4444; /* red-500 */
    --color-accent-600: #DC2626; /* red-600 */
    --color-accent-700: #B91C1C; /* red-700 */
    --color-accent-800: #991B1B; /* red-800 */
    --color-accent-900: #7F1D1D; /* red-900 */
    --color-accent-foreground: #FFFFFF; /* white */

    /* Background Colors */
    --color-background: #FAFAFA; /* neutral-50 */
    --color-background-foreground: #1F2937; /* gray-800 */

    /* Surface Colors */
    --color-surface: #FFFFFF; /* white */
    --color-surface-foreground: #1F2937; /* gray-800 */
    --color-surface-elevated: #FFFFFF; /* white */
    --color-surface-hover: #F9FAFB; /* gray-50 */

    /* Text Colors */
    --color-text-primary: #1F2937; /* gray-800 */
    --color-text-secondary: #6B7280; /* gray-500 */
    --color-text-tertiary: #9CA3AF; /* gray-400 */
    --color-text-disabled: #D1D5DB; /* gray-300 */

    /* Semantic Colors */
    --color-success: #059669; /* emerald-600 */
    --color-success-50: #ECFDF5; /* emerald-50 */
    --color-success-100: #D1FAE5; /* emerald-100 */
    --color-success-500: #10B981; /* emerald-500 */
    --color-success-600: #059669; /* emerald-600 */
    --color-success-700: #047857; /* emerald-700 */
    --color-success-foreground: #FFFFFF; /* white */

    --color-warning: #D97706; /* amber-600 */
    --color-warning-50: #FFFBEB; /* amber-50 */
    --color-warning-100: #FEF3C7; /* amber-100 */
    --color-warning-500: #F59E0B; /* amber-500 */
    --color-warning-600: #D97706; /* amber-600 */
    --color-warning-700: #B45309; /* amber-700 */
    --color-warning-foreground: #FFFFFF; /* white */

    --color-error: #DC2626; /* red-600 */
    --color-error-50: #FEF2F2; /* red-50 */
    --color-error-100: #FEE2E2; /* red-100 */
    --color-error-500: #EF4444; /* red-500 */
    --color-error-600: #DC2626; /* red-600 */
    --color-error-700: #B91C1C; /* red-700 */
    --color-error-foreground: #FFFFFF; /* white */

    --color-info: #0EA5E9; /* sky-500 */
    --color-info-50: #F0F9FF; /* sky-50 */
    --color-info-100: #E0F2FE; /* sky-100 */
    --color-info-500: #0EA5E9; /* sky-500 */
    --color-info-600: #0284C7; /* sky-600 */
    --color-info-foreground: #FFFFFF; /* white */

    /* Border Colors */
    --color-border: #E5E7EB; /* gray-200 */
    --color-border-light: #F3F4F6; /* gray-100 */
    --color-border-focus: #2563EB; /* blue-600 */

    /* Neutral Scale */
    --color-neutral-50: #FAFAFA; /* neutral-50 */
    --color-neutral-100: #F5F5F5; /* neutral-100 */
    --color-neutral-200: #E5E7EB; /* gray-200 */
    --color-neutral-300: #D1D5DB; /* gray-300 */
    --color-neutral-400: #9CA3AF; /* gray-400 */
    --color-neutral-500: #6B7280; /* gray-500 */
    --color-neutral-600: #4B5563; /* gray-600 */
    --color-neutral-700: #374151; /* gray-700 */
    --color-neutral-800: #1F2937; /* gray-800 */
    --color-neutral-900: #111827; /* gray-900 */

    /* Spacing Scale (8px base) */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */
    --spacing-2xl: 5rem; /* 80px */

    /* Border Radius Scale */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.75rem; /* 12px */
    --radius-lg: 1.125rem; /* 18px */
    --radius-xl: 1.5rem; /* 24px */

    /* Shadow Scale */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Typography Scale */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

    /* Z-Index Scale */
    --z-base: 0;
    --z-card: 1;
    --z-dropdown: 50;
    --z-navigation: 100;
    --z-modal: 200;
    --z-toast: 300;

    /* Transition Timing */
    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 350ms;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Dark Mode Variables */
  .dark {
    --color-background: #0F172A; /* slate-900 */
    --color-background-foreground: #E2E8F0; /* slate-200 */

    --color-surface: #1E293B; /* slate-800 */
    --color-surface-foreground: #E2E8F0; /* slate-200 */
    --color-surface-elevated: #334155; /* slate-700 */
    --color-surface-hover: #334155; /* slate-700 */

    --color-text-primary: #E2E8F0; /* slate-200 */
    --color-text-secondary: #94A3B8; /* slate-400 */
    --color-text-tertiary: #64748B; /* slate-500 */
    --color-text-disabled: #475569; /* slate-600 */

    --color-border: #334155; /* slate-700 */
    --color-border-light: #1E293B; /* slate-800 */

    /* Reduced vibrancy for dark mode */
    --color-primary: #3B82F6; /* blue-500 */
    --color-secondary: #8B5CF6; /* violet-500 */
    --color-accent: #EF4444; /* red-500 */
    --color-success: #10B981; /* emerald-500 */
    --color-warning: #F59E0B; /* amber-500 */
    --color-error: #EF4444; /* red-500 */

    /* Dark mode shadows with glow */
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 12px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 40px rgba(0, 0, 0, 0.6);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-text-primary font-body;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold;
  }

  h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
  }

  h2 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-snug);
  }

  h3 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-snug);
  }

  h4 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
  }

  h5 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
  }

  /* Smooth scrolling with padding for fixed header */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

  /* Custom scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neutral-100 dark:bg-neutral-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 dark:bg-neutral-600 rounded-md;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400 dark:bg-neutral-500;
  }

  /* Focus visible styles */
  *:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
  }

  /* Selection styles */
  ::selection {
    @apply bg-primary/20 text-text-primary;
  }
}

@layer components {
  /* Card Component */
  .card {
    @apply bg-surface rounded-xl p-8 border border-border shadow-sm;
    transition: box-shadow var(--transition-base) var(--transition-ease);
  }

  .card:hover {
    @apply shadow-md;
  }

  /* Button Components */
.btn  {
    @apply inline-flex items-center justify-center h-12 px-6 rounded-xl font-medium transition-all ease-out;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply active:scale-[0.97];
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary-700;
    @apply focus-visible:ring-primary;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary-700;
    @apply focus-visible:ring-secondary;
  }

  .btn-accent {
    @apply bg-accent text-accent-foreground hover:bg-accent-700;
    @apply focus-visible:ring-accent;
  }

  .btn-outline {
    @apply border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground;
    @apply focus-visible:ring-primary;
  }

  .btn-ghost {
    @apply text-text-primary hover:bg-neutral-100 dark:hover:bg-neutral-800;
  }

  /* Input Components */
  .input {
    @apply h-12 px-4 rounded-xl border border-border bg-surface text-text-primary;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    @apply placeholder:text-text-tertiary;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    transition: all var(--transition-base) var(--transition-ease);
  }

  .input-error {
    @apply border-error focus:ring-error;
  }

  .label {
    @apply block text-sm font-medium text-text-primary mb-2 font-caption;
  }

  /* Dropdown Component */
  .dropdown {
    @apply absolute bg-surface rounded-xl shadow-lg border border-border;
    @apply overflow-hidden;
    animation: slideDown 200ms var(--transition-ease);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Modal Component */
  .modal {
    @apply fixed inset-0 z-modal flex items-start justify-center pt-[5vh] px-4;
  }

  .modal-backdrop {
    @apply fixed inset-0 bg-background/80 backdrop-blur-sm;
    animation: fadeIn var(--transition-base) var(--transition-ease);
  }

  .modal-content {
    @apply relative bg-surface rounded-2xl shadow-2xl max-w-2xl w-full;
    animation: modalSlideIn var(--transition-base) var(--transition-ease);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Table Component */
  .table {
    @apply w-full border-collapse;
  }

  .table thead {
    @apply bg-neutral-50 dark:bg-neutral-800;
  }

  .table th {
    @apply px-6 py-4 text-left text-sm font-semibold text-text-primary border-b border-border;
  }

  .table td {
    @apply px-6 py-4 text-sm text-text-primary border-b border-border;
  }

  .table tbody tr {
    @apply hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors;
  }

  .table tbody tr:nth-child(even) {
    @apply bg-neutral-50/50 dark:bg-neutral-900/30;
  }

  /* Skeleton Loading */
  .skeleton {
    @apply bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* Badge Component */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium font-caption;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300;
  }
.badge-success  {
    @apply bg-success-100 text-success-700;
  }
.badge-warning  {
    @apply bg-warning-100 text-warning-700;
  }
.badge-error  {
    @apply bg-error-100 text-error-700;
  }

  /* Toast Notification */
  .toast {
    @apply fixed bottom-4 right-4 z-toast bg-surface border border-border rounded-xl shadow-xl p-4;
    @apply max-w-md;
    animation: toastSlideIn var(--transition-base) var(--transition-ease);
  }

  @keyframes toastSlideIn {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@layer utilities {
  /* Text Utilities */
  .text-balance {
    text-wrap: balance;
  }

  /* Truncate Utilities */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .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;
  }

  /* Touch Target Utilities */
  .touch-target {
    @apply min-w-[44px] min-h-[44px];
  }

  /* Hover Lift Effect */
  .hover-lift {
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .hover-lift:hover {
    transform: translateY(-1px);
  }

  /* Container Utilities */
  .container-padding {
    @apply px-4 md:px-6 lg:px-8;
  }

  .section-spacing {
    @apply py-20 md:py-24 lg:py-32;
  }

  /* Responsive Spacing Reduction */
  @media (max-width: 640px) {
    .card {
      @apply p-5;
    }

    .btn {
      @apply px-4;
    }

    .section-spacing {
      @apply py-12;
    }
  }
}