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

@layer base {
  :root {
    --radius: 0.625rem;
  }

  html {
    font-feature-settings: 'cv11', 'ss01', 'kern';
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply bg-paper text-ink font-sans antialiased;
    /* Subtle paper texture - very faint, only visible on closer inspection */
    background-image:
      radial-gradient(circle at 1px 1px, hsl(30 20% 12% / 0.015) 1px, transparent 0);
    background-size: 24px 24px;
  }

  h1, h2, h3, h4 {
    @apply font-display tracking-tight;
  }

  /* Numerals tabular in stat displays */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Focus rings: warm, not blue */
  *:focus-visible {
    @apply outline-none ring-2 ring-saffron-500 ring-offset-2 ring-offset-paper;
  }

  /* Scrollbar - subtle */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-ink-200 rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-ink-300;
  }
}

@layer components {
  /* "Lokta paper" card - the core surface in the app */
  .surface-card {
    @apply bg-card border border-border/60 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.02),0_4px_12px_rgba(0,0,0,0.03)];
  }

  /* Section divider - thin saffron rule, used sparingly */
  .saffron-rule {
    @apply h-px w-12 bg-saffron-500;
  }

  /* Status pill */
  .status-pill {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .status-pill--planned { @apply bg-ink-100 text-ink-600; }
  .status-pill--in-progress { @apply bg-saffron-100 text-saffron-700; }
  .status-pill--completed { @apply bg-moss-100 text-moss-700; }
  .status-pill--cancelled { @apply bg-ink-100 text-ink-400 line-through; }
  .status-pill--auto-closed { @apply bg-paper-200 text-ink-500; }
}