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

/* ═══════════════════════════════════════════════════════════════════════════
   HAMPTON REBRAND CSS CUSTOM PROPERTIES
   Reference: docs/prd/hampton-linear-rebrand.md
   These CSS variables enable dynamic theming and JavaScript access to colors.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Core Surface Colors (Dark Theme) */
  --wc-dark: #0F1419;
  --wc-surface: #1A1F26;
  --wc-elevated: #242A33;
  --wc-border: #30363D;

  /* Primary Accent (Purple) */
  --wc-accent: #7C5CFF;
  --wc-accent-hover: #9B7FFF;

  /* Coaching/Premium (Gold) */
  --wc-gold: #D4AF37;
  --wc-gold-hover: #E5C44A;

  /* Success State */
  --wc-success: #3FB950;

  /* Error/Destructive State (Rose) */
  --wc-rose: #FF21D0;
  --wc-rose-hover: #FF52DD;

  /* Text Hierarchy */
  --wc-text-primary: #F7F9F9;
  --wc-text-secondary: #8B949E;
  --wc-text-muted: #9CA3AF;

  /* Animation/Transition Tokens (NFR-02: max 300ms) */
  --wc-transition-default: 150ms ease-in-out;
  --wc-transition-slow: 300ms ease-in-out;

  /* Warning State (Amber) - Used for low coverage warnings */
  --wc-amber: #F59E0B;
  --wc-amber-hover: #D97706;
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
  }
}

@layer components {
  /* PrimeVue Migration - Simplified CSS */

  /* Brand Gradient Text Utilities */
  .gradient-text-yellow {
    color: #FFD600; /* Fallback color for unsupported browsers */
    background: linear-gradient(90deg, #FFD600 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @supports not (-webkit-background-clip: text) {
    .gradient-text-yellow {
      color: #FFD600 !important;
      -webkit-text-fill-color: #FFD600 !important;
    }
  }

  /* Skip Navigation Link for Accessibility */
  .skip-link {
    @apply absolute left-0 top-0 bg-yellow text-black px-4 py-2 z-50 -translate-y-full focus:translate-y-0 transition-transform duration-200;
  }

  /* Enhanced Focus Visibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-yellow;
  }

  /* Basic form styles - will be replaced with PrimeVue components */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md text-black placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow focus:border-yellow transition-colors duration-200;
  }

  .form-select {
    @apply form-input bg-white;
  }

  .form-textarea {
    @apply form-input;
  }

  .form-checkbox {
    @apply h-4 w-4 text-yellow border-gray-300 rounded focus:ring-yellow;
  }

  .form-radio {
    @apply h-4 w-4 text-yellow border-gray-300 focus:ring-yellow;
  }

  .form-label {
    @apply block text-sm font-medium text-black mb-1;
  }

  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  .form-group {
    @apply mb-4;
  }

  /* Loading States */
  .loading-spinner {
    @apply inline-block w-8 h-8 border-4 border-yellow/20 border-t-yellow rounded-full animate-spin;
  }

  .skeleton {
    @apply animate-pulse bg-gray-200 rounded;
  }

  .skeleton-text {
    @apply h-4 skeleton mb-2;
  }

  .skeleton-title {
    @apply h-6 skeleton mb-3 w-3/4;
  }

  .skeleton-box {
    @apply h-32 skeleton;
  }

  /* Blog Prose Table Styling - Ghost CMS tables use <td> for all cells including headers */
  .blog-prose table tr:first-child td {
    @apply bg-blue-50 font-semibold text-gray-900;
  }

  .blog-prose table tr:not(:first-child):nth-child(even) td {
    @apply bg-gray-50;
  }

  .blog-prose table tr:not(:first-child):nth-child(odd) td {
    @apply bg-white;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ADMIN DESIGN TOKENS - Story 1.2
     Matrix cell states, stat cards, and admin-specific styling
     Reference: docs/stories/1.2.admin-design-tokens.story.md
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Matrix Cell State Classes
     Each cell in the admin matrix can be in one of these states.
     All cells include transition for smooth state changes and focus ring.
     ───────────────────────────────────────────────────────────────────────── */

  /* Base cell styling - shared by all states */
  .cell-base {
    @apply transition-colors duration-150;
    @apply focus-visible:ring-2 focus-visible:ring-offset-2;
    --tw-ring-color: var(--wc-accent);
    --tw-ring-offset-color: var(--wc-dark);
  }

  /* Empty: No data available for this day */
  .cell-empty {
    @apply cell-base;
    color: var(--wc-text-muted);
    border: 1px solid transparent;
  }
  .cell-empty:hover {
    background-color: rgba(36, 42, 51, 0.5); /* wc-elevated at 50% */
  }

  /* Pending: Needs processing - dashed purple border */
  .cell-pending {
    @apply cell-base;
    color: var(--wc-accent);
    border: 2px dashed var(--wc-accent);
  }
  .cell-pending:hover {
    background-color: rgba(124, 92, 255, 0.1); /* wc-accent at 10% */
  }

  /* Draft: Pending finalization - solid border */
  .cell-draft {
    @apply cell-base;
    color: var(--wc-text-secondary);
    border: 1px solid var(--wc-border);
  }
  .cell-draft:hover {
    background-color: rgba(36, 42, 51, 0.5); /* wc-elevated at 50% */
  }

  /* Free: Free day or free pass granted - gold styling */
  .cell-free {
    @apply cell-base;
    color: var(--wc-gold);
    border: 1px solid var(--wc-gold);
    background-color: rgba(212, 175, 55, 0.1); /* wc-gold at 10% */
  }
  .cell-free:hover {
    background-color: rgba(212, 175, 55, 0.2); /* wc-gold at 20% */
  }

  /* Qualified: Successfully qualified - green styling */
  .cell-qualified {
    @apply cell-base;
    color: var(--wc-success);
    border: 1px solid var(--wc-success);
    background-color: rgba(63, 185, 80, 0.1); /* wc-success at 10% */
  }
  .cell-qualified:hover {
    background-color: rgba(63, 185, 80, 0.2); /* wc-success at 20% */
  }

  /* Failed Pending: Failed, charge pending - rose styling */
  .cell-failed-pending {
    @apply cell-base;
    color: var(--wc-rose);
    border: 1px solid var(--wc-rose);
    background-color: rgba(255, 33, 208, 0.1); /* wc-rose at 10% */
  }
  .cell-failed-pending:hover {
    background-color: rgba(255, 33, 208, 0.15); /* wc-rose at 15% */
  }

  /* Failed Charged: Failed and charge completed - darker rose */
  .cell-failed-charged {
    @apply cell-base;
    color: var(--wc-rose);
    border: 1px solid var(--wc-rose);
    background-color: rgba(255, 33, 208, 0.2); /* wc-rose at 20% */
  }
  .cell-failed-charged:hover {
    background-color: rgba(255, 33, 208, 0.25); /* wc-rose at 25% */
  }

  /* Failed Error: Failed with payment error - dashed rose border */
  .cell-failed-error {
    @apply cell-base;
    color: var(--wc-rose);
    border: 2px dashed var(--wc-rose);
  }
  .cell-failed-error:hover {
    background-color: rgba(255, 33, 208, 0.1); /* wc-rose at 10% */
  }

  /* Excluded: Excluded from challenge day - muted with strikethrough */
  .cell-excluded {
    @apply cell-base;
    color: var(--wc-text-muted);
    text-decoration: line-through;
    border: none;
    opacity: 0.6;
  }
  .cell-excluded:hover {
    opacity: 0.8;
  }

  /* Warning: Low data coverage - amber styling */
  .cell-warning {
    @apply cell-base;
    color: var(--wc-amber);
    border: 1px solid var(--wc-amber);
    background-color: rgba(245, 158, 11, 0.1); /* wc-amber at 10% */
  }
  .cell-warning:hover {
    background-color: rgba(245, 158, 11, 0.2); /* wc-amber at 20% */
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Admin Stat Card Classes
     Financial summary cards in the admin dashboard
     ───────────────────────────────────────────────────────────────────────── */

  .admin-stat-card {
    background-color: var(--wc-surface);
    border: 1px solid var(--wc-border);
    @apply rounded-lg p-4 transition-colors duration-150;
  }
  .admin-stat-card:hover {
    background-color: var(--wc-elevated);
  }

  .admin-stat-positive {
    color: var(--wc-success);
  }

  .admin-stat-negative {
    color: var(--wc-rose);
  }

  .admin-stat-neutral {
    color: var(--wc-text-primary);
  }

  .admin-stat-label {
    color: var(--wc-text-secondary);
    @apply text-sm font-medium;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Hampton ProgressBar Styling - Story 3.2
     Override PrimeVue default green with Hampton purple accent
     ───────────────────────────────────────────────────────────────────────── */

  .progress-bar-hampton .p-progressbar-value {
    background: var(--wc-accent) !important;
  }

  .progress-bar-hampton .p-progressbar {
    background: var(--wc-elevated);
  }

}

/* Blog Single Page Sidebar Layout - Story 59.1 */
/* These rules are OUTSIDE @layer to ensure they're always included */
.blog-layout-wrapper {
  display: flex;
  flex-direction: column;
}

.blog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .blog-layout-wrapper {
    flex-direction: row;
    gap: 3rem;
  }

  /* Add scroll headroom for sticky sidebar release on short viewports */
  /* This padding creates space at the bottom so when users scroll past the article,
     the sidebar can scroll up and reveal its full content */
  .blog-layout-wrapper > article {
    padding-bottom: 24rem; /* 384px - enough for sidebar content to scroll into view */
  }

  .blog-sidebar {
    display: block;
  }
}