frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

/* RepoAgent — academic research aesthetic.
   Warm paper background, deep ink foreground, subtle scholarly accents.
   All colors HSL. */

@layer base {
  :root {
    --background: 40 30% 97%;
    --foreground: 220 25% 12%;

    --card: 40 35% 99%;
    --card-foreground: 220 25% 12%;

    --popover: 40 35% 99%;
    --popover-foreground: 220 25% 12%;

    /* Deep scholarly ink */
    --primary: 220 35% 15%;
    --primary-foreground: 40 30% 97%;

    /* Warm parchment */
    --secondary: 38 25% 92%;
    --secondary-foreground: 220 30% 18%;

    --muted: 38 20% 93%;
    --muted-foreground: 220 10% 42%;

    /* Burgundy academic accent */
    --accent: 355 55% 38%;
    --accent-foreground: 40 30% 97%;

    --success: 142 45% 35%;
    --success-foreground: 40 30% 97%;

    --warning: 35 85% 48%;
    --warning-foreground: 220 25% 12%;

    --destructive: 0 65% 45%;
    --destructive-foreground: 40 30% 97%;

    --border: 35 20% 85%;
    --input: 35 20% 88%;
    --ring: 355 55% 38%;

    --radius: 0.375rem;

    /* Gradients */
    --gradient-paper: linear-gradient(180deg, hsl(40 35% 98%) 0%, hsl(38 25% 94%) 100%);
    --gradient-ink: linear-gradient(135deg, hsl(220 35% 15%) 0%, hsl(220 30% 22%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(355 55% 38%) 0%, hsl(15 60% 45%) 100%);
    --gradient-glow: radial-gradient(ellipse at top, hsl(355 55% 38% / 0.08), transparent 60%);

    /* Shadows — soft, paper-like */
    --shadow-paper: 0 1px 2px hsl(220 25% 12% / 0.04), 0 4px 16px hsl(220 25% 12% / 0.04);
    --shadow-elevated: 0 2px 4px hsl(220 25% 12% / 0.06), 0 12px 32px hsl(220 25% 12% / 0.08);
    --shadow-deep: 0 4px 8px hsl(220 25% 12% / 0.08), 0 24px 48px hsl(220 25% 12% / 0.12);

    /* Transitions */
    --transition-smooth: cubic-bezier(0.32, 0.72, 0, 1);

    --sidebar-background: 40 30% 97%;
    --sidebar-foreground: 220 25% 12%;
    --sidebar-primary: 220 35% 15%;
    --sidebar-primary-foreground: 40 30% 97%;
    --sidebar-accent: 38 25% 92%;
    --sidebar-accent-foreground: 220 30% 18%;
    --sidebar-border: 35 20% 85%;
    --sidebar-ring: 355 55% 38%;
  }

  .dark {
    --background: 220 25% 8%;
    --foreground: 40 25% 92%;
    --card: 220 25% 10%;
    --card-foreground: 40 25% 92%;
    --popover: 220 25% 10%;
    --popover-foreground: 40 25% 92%;
    --primary: 40 25% 92%;
    --primary-foreground: 220 25% 8%;
    --secondary: 220 20% 16%;
    --secondary-foreground: 40 25% 92%;
    --muted: 220 20% 16%;
    --muted-foreground: 40 10% 65%;
    --accent: 355 60% 55%;
    --accent-foreground: 40 25% 92%;
    --destructive: 0 65% 50%;
    --destructive-foreground: 40 25% 92%;
    --border: 220 20% 18%;
    --input: 220 20% 18%;
    --ring: 355 60% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply bg-background text-foreground;
    background-image:
      var(--gradient-glow),
      radial-gradient(circle at 1px 1px, hsl(220 25% 12% / 0.025) 1px, transparent 0);
    background-size: 100% 100%, 24px 24px;
    background-attachment: fixed;
  }
  .font-serif {
    font-family: 'Instrument Serif', 'Georgia', serif;
    font-feature-settings: 'liga', 'dlig';
  }
  .font-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
}

@layer utilities {
  .bg-paper { background: var(--gradient-paper); }
  .bg-ink { background: var(--gradient-ink); }
  .bg-accent-gradient { background: var(--gradient-accent); }
  .shadow-paper { box-shadow: var(--shadow-paper); }
  .shadow-elevated { box-shadow: var(--shadow-elevated); }
  .shadow-deep { box-shadow: var(--shadow-deep); }
  .transition-smooth { transition: all 0.4s var(--transition-smooth); }

  .text-balance { text-wrap: balance; }

  /* Paper texture border */
  .paper-edge {
    position: relative;
  }
  .paper-edge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, hsl(35 20% 80%), hsl(35 20% 90%));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

@layer base {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
}

@layer utilities {
  .animate-fade-up { animation: fade-up 0.6s var(--transition-smooth) both; }
  .animate-fade-in { animation: fade-in 0.5s ease-out both; }
  .animate-scale-in { animation: scale-in 0.4s var(--transition-smooth) both; }
  .animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }
  .animate-blink { animation: blink 1s step-end infinite; }
}