@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* ========================================
   Design System - Modern, Clean, Accessible
   Tailwind CSS v4 - CSS-first configuration
   ======================================== */

/* ========================================
   CSS VARIABLE NAMING & ARCHITECTURE
   ========================================

   Two-layer CSS variable system:

   1. @theme layer (lines 14-164): Maps raw CSS variables to Tailwind --color-* tokens
      - Enables Tailwind utility classes like 'bg-primary', 'text-ring', 'border-foreground'
      - Uses hsl() function to reference :root variables
      - DO NOT edit this layer manually

   2. :root & .dark selectors (lines 170-301): Raw CSS custom properties in HSL format
      - Format: --variable-name: hue saturation% lightness%
      - Light mode defined in :root (lines 170-236)
      - Dark mode overrides defined in .dark selector (lines 242-301)
      - EDIT ONLY THIS LAYER for color changes
      - Always update both light and dark mode for consistency

   Example change:
     Wrong:  Edit @theme block directly
     Right:  Update :root or .dark HSL values, let @theme map them automatically

   ======================================== */

/* ========================================
   THEME CONFIGURATION
   Custom design tokens via @theme
   ======================================== */

@theme {
  /* Colors - mapped from CSS variables for Tailwind utility classes */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-warning-high: hsl(var(--warning-high));
  --color-warning-high-foreground: hsl(var(--warning-high-foreground));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));
  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));
  --color-rating: hsl(var(--rating));
  --color-rating-foreground: hsl(var(--rating-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  /* Sidebar colors */
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Brand surface - for large branded backgrounds */
  --color-brand-surface: hsl(var(--brand-surface));
  --color-brand-surface-foreground: hsl(var(--brand-surface-foreground));

  /* Overlay for modals/dialogs */
  --color-overlay: hsl(var(--overlay) / 0.8);

  /* Border radius tokens */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);

  /* Animation definitions */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-fade-in-up: fade-in-up 0.5s ease-out;
  --animate-scale-in: scale-in 0.3s ease-out;
  --animate-float: float 3s ease-in-out infinite;
  --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
  --animate-shimmer: shimmer 2s linear infinite;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes bounce-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes checkmark {
    0% { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
  }

  --animate-bounce-in: bounce-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --animate-slide-in-right: slide-in-right 0.3s ease-out;
  --animate-checkmark: checkmark 0.3s ease-out forwards;

  /* Enhanced Animations */
  @keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
  }

  @keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--glow-color, hsl(var(--primary) / 0.5)); }
    50% { box-shadow: 0 0 20px 5px var(--glow-color, hsl(var(--primary) / 0.3)); }
  }

  @keyframes progress-fill {
    from { width: 0%; }
    to   { width: 95%; }
  }

  @keyframes progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
  }

  --animate-pulse-ring: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-slide-up: slide-up 0.5s ease-out forwards;
  --animate-glow-pulse: glow-pulse 2s ease-in-out infinite;
  --animate-progress-fill: progress-fill 60s linear forwards;
}

/* ========================================
   CSS CUSTOM PROPERTIES - Light Mode
   ======================================== */

:root {
  /* Smooth theme transitions - respects reduced-motion preference */
  @media (prefers-reduced-motion: no-preference) {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  --background: 210 20% 98%;
  --foreground: 220 25% 10%;

  --card: 0 0% 100%;
  --card-foreground: 220 25% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 10%;

  --primary: 220 90% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 15% 94%;
  --secondary-foreground: 220 25% 10%;

  --muted: 220 15% 94%;
  --muted-foreground: 220 10% 30%;

  --accent: 155 75% 40%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  --warning-high: 21 91% 48%;
  --warning-high-foreground: 0 0% 100%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  --info: 199 89% 48%;
  --info-foreground: 0 0% 100%;

  --rating: 45 93% 47%;
  --rating-foreground: 0 0% 10%;

  --border: 220 15% 88%;
  --input: 220 15% 88%;
  --ring: 220 90% 45%;

  --chart-1: 220 90% 45%;
  --chart-2: 142 76% 36%;
  --chart-3: 38 92% 50%;
  --chart-4: 0 72% 51%;
  --chart-5: 280 65% 50%;

  --radius: 0.5rem;

  --sidebar-background: 220 20% 97%;
  --sidebar-foreground: 220 25% 10%;
  --sidebar-primary: 220 90% 45%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 94%;
  --sidebar-accent-foreground: 220 25% 10%;
  --sidebar-border: 220 15% 88%;
  --sidebar-ring: 220 90% 45%;

  /* Brand surface - for large branded backgrounds */
  --brand-surface: 220 90% 45%;
  --brand-surface-foreground: 0 0% 100%;

  /* Overlay for modals/dialogs */
  --overlay: 0 0% 0%;

  /* Elevation / shadow tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 40px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px 5px hsl(var(--primary) / 0.3);
}

/* ========================================
   CSS CUSTOM PROPERTIES - Dark Mode
   ======================================== */

.dark {
  --background: 220 25% 6%;
  --foreground: 210 20% 98%;

  --card: 220 25% 11%;
  --card-foreground: 210 20% 98%;

  --popover: 220 25% 14%;
  --popover-foreground: 210 20% 98%;

  --primary: 212 100% 72%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 20% 20%;
  --secondary-foreground: 210 20% 98%;

  --muted: 220 20% 14%;
  --muted-foreground: 220 15% 72%;

  --accent: 155 75% 45%;
  --accent-foreground: 220 25% 10%;

  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 100%;

  --warning: 38 92% 55%;
  --warning-foreground: 0 0% 10%;

  --warning-high: 25 95% 60%;
  --warning-high-foreground: 0 0% 10%;

  --success: 142 76% 42%;
  --success-foreground: 0 0% 100%;

  --info: 199 89% 55%;
  --info-foreground: 0 0% 100%;

  --rating: 45 93% 55%;
  --rating-foreground: 0 0% 10%;

  --border: 220 18% 30%;
  --input: 220 18% 30%;
  --ring: 212 100% 72%;

  --chart-1: 212 100% 72%;
  --chart-2: 142 76% 42%;
  --chart-3: 38 92% 55%;
  --chart-4: 0 72% 55%;
  --chart-5: 280 65% 55%;

  --sidebar-background: 220 25% 7%;
  --sidebar-foreground: 210 20% 98%;
  --sidebar-primary: 212 100% 72%;
  --sidebar-primary-foreground: 220 25% 10%;
  --sidebar-accent: 220 20% 16%;
  --sidebar-accent-foreground: 210 20% 98%;
  --sidebar-border: 220 20% 22%;
  --sidebar-ring: 212 100% 72%;

  /* Brand surface - darker in dark mode for large backgrounds */
  --brand-surface: 220 90% 45%;
  --brand-surface-foreground: 0 0% 100%;

  /* Overlay for modals/dialogs - slightly blue-tinted for dark mode */
  --overlay: 220 30% 4%;

  /* Elevation / shadow tokens — darker opacity for dark backgrounds */
  --shadow-xl: 0 20px 40px rgb(0 0 0 / 0.3);
}

/* ========================================
   HEADING HIERARCHY DOCUMENTATION
   ======================================== */

/*
  Proper heading structure is critical for:
  - Screen reader users who navigate via headings
  - SEO and document outline
  - Keyboard navigation accessibility

  RULE: Never skip heading levels (h1 → h2 → h3 is correct, h1 → h3 is wrong)

  Typical page structure:
  <h1>Page Title</h1>              (once per page, top-level context)
  <h2>Section Title</h2>           (main sections, articles, cards)
  <h3>Subsection Title</h3>        (content within sections)
  <h4>Detailed point</h4>          (optional, for complex sections)

  Typography pairing (for visual consistency):
  h1 → text-2xl or text-3xl font-bold
  h2 → text-xl or text-2xl font-semibold
  h3 → text-lg or text-xl font-semibold
  h4 → text-base or text-lg font-medium

  WCAG Success Criterion 1.3.1 (Info and Relationships):
  Structure must be communicated through semantics, not visual styling alone.
  Always use proper heading levels even if CSS makes them look the same size.
*/

/* ========================================
   TYPOGRAPHY SCALE DOCUMENTATION
   ======================================== */

/*
  Typography classes follow a consistent sizing scale:

  text-xs    → 12px (0.75rem) - small labels, hints
  text-sm    → 14px (0.875rem) - secondary text, descriptions
  text-base  → 16px (1rem) - body text, default
  text-lg    → 18px (1.125rem) - secondary headings
  text-xl    → 20px (1.25rem) - subheadings
  text-2xl   → 24px (1.5rem) - h3/section headings
  text-3xl   → 30px (1.875rem) - h2 headings
  text-4xl   → 36px (2.25rem) - h1 main heading

  Font weights:
  font-normal  → 400 (body text)
  font-medium  → 500 (labels, UI text)
  font-semibold → 600 (subheadings)
  font-bold    → 700 (headings)

  Line height classes paired with text sizes maintain WCAG contrast
  and readability across all viewport sizes.
*/

/* ========================================
   SPACING TOKENS DOCUMENTATION
   ======================================== */

/*
  Spacing uses a 4px base unit for consistency:

  space-1    → 0.25rem (4px)   - tight spacing
  space-2    → 0.5rem (8px)    - small gaps
  space-3    → 0.75rem (12px)  - default element spacing
  space-4    → 1rem (16px)     - common padding
  space-6    → 1.5rem (24px)   - section padding
  space-8    → 2rem (32px)     - card padding, large gaps
  space-12   → 3rem (48px)     - section spacing
  space-16   → 4rem (64px)     - major section spacing

  Applied with: p-{n} (padding), m-{n} (margin), gap-{n} (gaps)
  Example: p-6 = padding 1.5rem (24px)
  Example: gap-4 = gap 1rem (16px)

  Responsive variants: md:p-8 = padding at md breakpoint
  Mobile-first approach: base rules apply to all, then override with breakpoint prefixes
*/

/* ========================================
   NPROGRESS OVERRIDES
   ======================================== */

#nprogress .bar {
    background: hsl(var(--primary));
}
#nprogress .peg {
    box-shadow: 0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary));
}
#nprogress .spinner-icon {
    display: none;
}

/* ========================================
   BASE LAYER STYLES
   ======================================== */

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========================================
   UTILITY LAYER
   ======================================== */

@layer utilities {
  .container {
    margin-inline: auto;
    padding-inline: 1.5rem;
    /* Mobile-first: reduce padding on very small screens for better space utilization */
    @media (max-width: 360px) {
      padding-inline: 1rem;
    }
  }

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

  /* Marketing page animation delays — used with animate-fade-in-up */
  .animate-delay-100 {
    animation-delay: 0.1s;
  }
  .animate-delay-200 {
    animation-delay: 0.2s;
  }

  /* Focus-visible styles for keyboard navigation */
  .focus-visible:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* Enhanced focus for interactive elements */
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* Row highlight for table rows */
  .row-highlight {
    transition: background-color 0.15s ease;
  }

  .row-highlight:hover {
    background-color: hsl(var(--muted) / 0.5);
  }

  /* Touch-friendly tap targets for mobile */
  @media (pointer: coarse) {
    .touch-target {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* Glassmorphism */
  .glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .dark .glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  }

  /* Hover lift effect */
  .hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-xl);
  }

  .dark .hover-lift:hover {
    box-shadow: var(--shadow-xl);
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .hover-lift {
      transition: none;
    }
    .hover-lift:hover {
      transform: none;
    }
    .animate-fade-in-up,
    .animate-fade-in,
    [class*="animate-delay-"] {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    [class*='animate-'] {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    .animate-spin,
    .animate-pulse,
    .animate-bounce,
    .animate-ping {
      animation: none !important;
    }
  }

  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Shimmer effect */
  .shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
  }
}

/* ========================================
   DS-006: INTERACTION STATE CSS HELPERS
   Hover, focus, disabled, and loading state helpers.
   ======================================== */

.state-hover {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.state-hover:hover {
  background-color: hsl(var(--accent) / 0.1);
  color: hsl(var(--accent-foreground));
}

.state-focus:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

.state-disabled,
[disabled],
[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.state-loading {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.state-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    hsl(var(--muted) / 0.4) 0%,
    hsl(var(--muted) / 0.8) 50%,
    hsl(var(--muted) / 0.4) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: inherit;
}

/* ========================================
   A11Y-012: PRINT STYLES
   ======================================== */

@media print {
  /* Hide navigation, sidebars, and interactive elements */
  nav,
  header,
  .sidebar,
  .navigation,
  [role="navigation"],
  footer,
  .footer,
  .btn-close,
  .modal,
  .dialog,
  [role="dialog"],
  .modal-backdrop,
  .toast,
  [role="alert"],
  .notification,
  .search-bar,
  .filter-panel,
  .pagination,
  button:not([aria-label*="print"]),
  a[href="#"],
  .no-print {
    display: none !important;
  }

  /* Optimize content for print */
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }

  /* Preserve content readability */
  main,
  article,
  .content,
  [role="main"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Page breaks for large content */
  article,
  .page-break {
    page-break-after: always;
  }

  /* Prevent breaking within elements */
  h1, h2, h3, h4, h5, h6,
  table,
  blockquote {
    page-break-inside: avoid;
  }

  /* Ensure links are visible in print */
  a {
    text-decoration: underline;
    color: black;
  }

  /* Remove colors from buttons and interactive elements */
  button,
  .btn,
  [role="button"] {
    background: none;
    border: 1px solid black;
    color: black;
    padding: 0.5rem 1rem;
  }

  /* Print-friendly images */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }

  /* Remove margins for better space utilization */
  p {
    margin-bottom: 0.5rem;
  }

  /* Optimize table display for print */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  table th,
  table td {
    border: 1px solid black;
    padding: 0.25rem 0.5rem;
    text-align: left;
  }

  /* Hide print button itself */
  .print-button,
  [aria-label*="print"] {
    display: none !important;
  }
}