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

/* =========================================================================
   HeadlineSift.com — Global Styles
   ========================================================================= */

@layer base {
  /* ---- CSS Variables ---- */
  :root {
    --color-brand: #2563eb;
    --color-brand-hover: #1d4ed8;
    --color-heading: #0f172a;
    --color-body: #334155;
    --color-muted: #64748b;
    --color-surface: #ffffff;
    --color-surface-secondary: #f8fafc;
    --color-border: #e2e8f0;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  }

  /* ---- Base Reset ---- */
  *,
  *::before,
  *::after {
    border-color: var(--color-border);
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-white text-body font-sans;
    min-height: 100vh;
  }

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

  h1 {
    @apply text-3xl tracking-tight;
  }
  h2 {
    @apply text-2xl tracking-tight;
  }
  h3 {
    @apply text-xl tracking-tight;
  }
  h4 {
    @apply text-lg;
  }

  a {
    @apply text-brand-600 transition-colors hover:text-brand-700;
  }

  /* ---- Focus Visible ---- */
  :focus-visible {
    @apply outline-brand-500 outline-2 outline-offset-2;
  }
}

@layer components {
  /* ---- Container ---- */
  .container-main {
    @apply mx-auto w-full max-w-content px-4 sm:px-6 lg:px-8;
  }

  /* ---- Button Base ---- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-150
           focus-visible:outline-2 focus-visible:outline-offset-2
           disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800;
  }

  .btn-secondary {
    @apply btn border border-border bg-white text-body hover:bg-surface-secondary active:bg-surface-tertiary;
  }

  .btn-ghost {
    @apply btn bg-transparent text-body hover:bg-surface-secondary;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
  }

  /* ---- Input Base ---- */
  .input {
    @apply w-full rounded-md border border-border bg-white px-3 py-2 text-sm text-body
           placeholder:text-body-muted
           focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20
           disabled:cursor-not-allowed disabled:opacity-50;
  }

  .input-error {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
  }

  /* ---- Label ---- */
  .label {
    @apply block text-sm font-medium text-heading;
  }

  /* ---- Card ---- */
  .card {
    @apply rounded-lg border border-border bg-surface p-6 shadow-sm;
  }

  /* ---- Badge ---- */
  .badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-2xs font-semibold uppercase tracking-wider;
  }

  .badge-source {
    @apply badge bg-brand-50 text-brand-700;
  }

  .badge-category {
    @apply badge bg-slate-100 text-slate-700;
  }

  .badge-trending {
    @apply badge bg-orange-50 text-orange-700;
  }

  .badge-breaking {
    @apply badge bg-red-50 text-red-700;
  }

  /* ---- Divider ---- */
  .divider {
    @apply border-t border-border;
  }
}

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

  /* ---- Line Clamp ---- */
  .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;
  }

  /* ---- Visually Hidden ---- */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}