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

/* Humanist Design System - Minimalist Typography */

@layer base {
  :root {
    /* Color Palette - Brownish Grayscale */
    --color-base: #1A1614;
    --color-text: #2C2520;
    --color-text-muted: #6B5F55;
    --color-accent: #8B6F47;
    --color-accent-hover: #6B5435;
    --color-background: #F5F3F0;
    --color-surface: #FFFFFF;
    --color-border: #D4C9BC;
    --color-border-subtle: #E8E1D9;
    
    /* Typography - Inter & JetBrains Mono from Google Fonts (variables set by Next.js font loader) */
    
    /* Spacing - Generous, Humanist */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 0.75rem;   /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* Typography Scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    
    /* Line Heights - Comfortable Reading */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;
    
    /* Max Content Width */
    --max-width-content: 1200px;
    --max-width-narrow: 800px;
  }
  
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-text;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  code, pre {
    font-family: var(--font-mono), 'Roboto Mono', 'Menlo', monospace;
  }
  
  /* Typography Hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold text-base;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
  }
  
  h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    @apply mb-6;
  }
  
  h2 {
    font-size: var(--text-3xl);
    @apply mb-5;
  }
  
  h3 {
    font-size: var(--text-2xl);
    @apply mb-4;
  }
  
  h4 {
    font-size: var(--text-xl);
    @apply mb-3;
  }
  
  p {
    @apply mb-4;
    line-height: var(--leading-relaxed);
  }
  
  /* Links - Subtle, Humanist */
  a {
    @apply text-accent no-underline;
    transition: color 0.2s ease;
  }
  
  a:hover {
    @apply text-accent-hover;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  /* Focus States - Accessible */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-accent;
  }
}

@layer components {
  /* Container - Max Width with Reduced Padding */
  .container-content {
    @apply px-2;
    max-width: var(--max-width-content);
    margin: 0 auto;
  }
  
  .container-narrow {
    @apply mx-auto px-2;
    max-width: var(--max-width-narrow);
  }
  
  /* Cards - Minimalist, Sharp, No Rounded Edges */
  .card {
    @apply bg-surface border border-border rounded-none p-4;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  }
  
  .card-hover {
    @apply card transition-all duration-200;
  }
  
  .card-hover:hover {
    @apply shadow-md;
    transform: translateY(-1px);
  }
  
  /* Buttons - Minimalist, Sharp, No Rounded Edges */
  .btn {
    @apply px-4 py-2 rounded-none font-medium transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-accent text-white;
    @apply hover:bg-accent-hover;
    @apply focus:ring-accent;
  }
  
  .btn-secondary {
    @apply btn bg-surface border border-border text-text;
    @apply hover:bg-border-subtle;
    @apply focus:ring-border;
  }
  
  .btn-ghost {
    @apply btn bg-transparent text-text-muted;
    @apply hover:bg-border-subtle hover:text-text;
  }
  
  /* Tables - Clean, Readable */
  .table {
    @apply w-full border-collapse;
  }
  
  .table th {
    @apply text-left font-semibold text-xs text-text-muted uppercase tracking-wide;
    @apply select-none px-3 py-2;
  }
  
  .table td {
    @apply border-b border-border-subtle px-3 py-2;
  }
  
  .table tbody tr:hover {
    background-color: rgba(232, 225, 217, 0.3); /* border-subtle with 30% opacity */
  }
  
  .table tbody tr:last-child td {
    @apply border-b-0;
  }
  
  /* Badges/Tags - Subtle, Sharp, No Rounded Edges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-none text-xs font-medium;
  }
  
  .badge-primary {
    @apply badge text-accent;
    background-color: rgba(139, 111, 71, 0.1); /* brownish accent with 10% opacity */
  }
  
  .badge-secondary {
    @apply badge bg-border text-text-muted;
  }
  
  /* Inputs - Clean, Sharp, No Rounded Edges */
  .input {
    @apply w-full px-4 py-2 border border-border rounded-none;
    @apply bg-surface text-text;
    @apply focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent;
    @apply transition-all duration-200;
  }
  
  /* Stats Cards */
  .stat-card {
    @apply card;
  }
  
  .stat-value {
    @apply text-3xl font-semibold text-base mb-1;
  }
  
  .stat-label {
    @apply text-sm text-text-muted;
  }
}

@layer utilities {
  /* Text Utilities */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Spacing Utilities - Reduced Padding */
  .section-padding {
    @apply py-4 md:py-6;
  }
  
  /* Modal utilities */
  .overflow-hidden {
    overflow: hidden;
  }
  
  /* Scrollable analytics */
  .overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  
  .overflow-x-auto::-webkit-scrollbar {
    height: 6px;
  }
  
  .overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 0;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-muted);
  }

  /* Timeline Page Styles */
  .timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 8px;
  }

  .timeline-header {
    margin-bottom: 36px;
  }

  .timeline-title {
    font-size: 28px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }

  .timeline-subtitle {
    font-size: 14px;
    color: #737373;
    margin-bottom: 4px;
  }

  .timeline-source {
    font-size: 13px;
    color: #737373;
    font-weight: 500;
  }

  .timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .year-column {
    position: relative;
  }

  .year-header {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000000;
    letter-spacing: -0.3px;
  }

  .deals-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .deal-card {
    padding: 12px;
    background: #fafafa;
    border-left: 3px solid #d4d4d4;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
  }

  .deal-card:hover {
    border-left-color: #000000;
    background: #f5f5f5;
  }

  .deal-parties {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 3px;
    letter-spacing: -0.1px;
    line-height: 1.3;
  }

  .deal-value {
    font-size: 12px;
    font-weight: 600;
    color: #404040;
    margin-bottom: 3px;
  }

  .deal-desc {
    font-size: 11px;
    color: #737373;
    line-height: 1.4;
  }

  .timeline-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    font-size: 11px;
    color: #737373;
    text-align: center;
  }

  .timeline-empty {
    font-size: 11px;
    color: #737373;
    font-style: italic;
  }

  /* Progress bar - container and fill using CSS custom properties */
  .progress-bar-container {
    @apply w-full bg-border-subtle rounded-none h-1.5 relative overflow-hidden;
  }
  
  .progress-bar-fill {
    @apply bg-accent h-1.5 rounded-none absolute top-0 left-0 transition-all;
    width: calc(var(--progress-percentage, 0) * 1%);
  }
  
  /* Legacy progress-bar class for compatibility */
  .progress-bar {
    transition: width 0.3s ease;
  }
}