/**
 * Connexus Design System by Ascanio
 * Brand-driven, geometric, and modern
 * Color Space: OKLCH (perceptually uniform)
 * Philosophy: Distinctive blue brand identity + professional neutrals
 * 2026 UI/UX standards with "wow factor"
 */

:root {
  /* ==================== BRAND COLORS (From Connexus Logo) ==================== */

  /* Brand Teal - Primary Identity (remapped from Connexus blue to Senera teal) */
  --color-connexus-blue:      #0e8675;                 /* Senera teal primary */
  --color-connexus-blue-dark: #0a6a5d;                 /* Darker teal for hover */
  --color-connexus-blue-light:#3da897;                 /* Lighter teal */
  --color-connexus-blue-subtle:#def5f1;                /* Very light teal bg */

  /* Primary Accent */
  --color-primary:          hsl(172,55%,32%);          /* Teal primary */
  --color-primary-hover:    hsl(172,55%,26%);          /* Dark teal hover */
  --color-primary-light:    hsl(172,55%,92%);          /* Light teal background */
  --color-primary-glow:     hsl(172 55% 32% / 0.2);   /* Teal glow effect */

  /* Pure Neutrals - Professional foundation */
  --color-neutral-0:    oklch(1 0 0);        /* Pure white */
  --color-neutral-50:   oklch(0.98 0 0);     /* Off-white */
  --color-neutral-100:  oklch(0.96 0 0);     /* Lightest gray */
  --color-neutral-200:  oklch(0.92 0 0);     /* Light gray - borders */
  --color-neutral-300:  oklch(0.85 0 0);     /* Medium-light gray */
  --color-neutral-400:  oklch(0.70 0 0);     /* Medium gray - disabled */
  --color-neutral-500:  oklch(0.55 0 0);     /* Dark-medium gray */
  --color-neutral-600:  oklch(0.40 0 0);     /* Dark gray - secondary text */
  --color-neutral-700:  oklch(0.30 0 0);     /* Darker gray */
  --color-neutral-800:  oklch(0.20 0 0);     /* Very dark gray */
  --color-neutral-900:  oklch(0.10 0 0);     /* Almost black - primary text */
  --color-neutral-950:  oklch(0.05 0 0);     /* Near black */
  --color-neutral-1000: oklch(0 0 0);        /* Pure black */

  /* Legacy Brand Colors */
  --color-brand-primary: var(--color-connexus-blue);
  --color-brand-accent:  oklch(0.60 0.18 165);  /* Success green */

  /* Semantic Colors - WCAG AA compliant (Stripe methodology) */
  --color-success:  oklch(0.60 0.15 145);    /* Green */
  --color-warning:  oklch(0.75 0.15 85);     /* Amber */
  --color-error:    oklch(0.55 0.22 25);     /* Red */
  --color-info:     oklch(0.60 0.12 180);    /* Teal */

  /* Legacy hex colors for compatibility - will be phased out */
  --gray-50:   #fafafa;
  --gray-100:  #f5f5f5;
  --gray-200:  #e5e5e5;
  --gray-300:  #d4d4d4;
  --gray-400:  #a3a3a3;
  --gray-500:  #737373;
  --gray-600:  #525252;
  --gray-700:  #404040;
  --gray-800:  #262626;
  --gray-900:  #171717;

  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-200:  #bfdbfe;
  --blue-300:  #93c5fd;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;
  --blue-600:  #2563eb;
  --blue-700:  #1d4ed8;
  --blue-800:  #1e40af;
  --blue-900:  #1e3a8a;

  --green-50:  #f0fdf4;
  --green-500: #10b981;
  --green-600: #059669;

  --red-50:    #fef2f2;
  --red-500:   #ef4444;
  --red-600:   #dc2626;

  --yellow-50: #fefce8;
  --yellow-500:#f59e0b;
  --yellow-600:#d97706;

  --purple-50: #faf5ff;
  --purple-500:#a855f7;
  --purple-600:#9333ea;

  /* ==================== FUNCTIONAL TOKENS (GitHub Primer pattern) ==================== */

  /* Backgrounds - Better contrast for visibility */
  --bg-primary:   var(--color-neutral-50);     /* Page background (light gray) */
  --bg-secondary: var(--color-neutral-0);      /* Card background (pure white) */
  --bg-tertiary:  var(--color-neutral-100);    /* Subtle backgrounds */
  --bg-hover:     var(--color-neutral-100);    /* Hover state */
  --bg-active:    var(--color-neutral-200);    /* Active/pressed */

  /* Text Colors */
  --text-primary:   var(--color-neutral-900);  /* Main text */
  --text-secondary: var(--color-neutral-600);  /* Supporting text */
  --text-tertiary:  var(--color-neutral-500);  /* Muted text */
  --text-disabled:  var(--color-neutral-400);  /* Disabled text */
  --text-inverse:   var(--color-neutral-0);    /* Text on dark bg */
  --text-link:      var(--color-brand-primary);
  --text-link-hover: #0a6a5d;     /* Darker blue on hover */

  /* Borders */
  --border-default: var(--color-neutral-200);
  --border-muted:   var(--color-neutral-100);
  --border-strong:  var(--color-neutral-300);
  --border-hover:   var(--color-neutral-300);
  --border-focus:   var(--color-brand-primary);

  /* Legacy border names for compatibility */
  --border-color:       var(--border-default);
  --border-color-hover: var(--border-hover);
  --border-color-focus: var(--border-focus);

  /* ==================== PAGE COLORS (WandaFigma-aligned) ==================== */
  /* Used by pages.css, component templates, and individual page styles */
  --color-background: #F7F8FA;              /* Page background - light gray */
  --color-card: #FFFFFF;                    /* Card background - pure white */
  --color-border: #E6E8EC;                  /* Border color - subtle gray */
  --color-foreground: #1A1D23;              /* Primary text - charcoal */
  --color-muted: #F7F8FA;                   /* Muted background - same as page bg */
  --color-muted-fg: #6B7280;                /* Muted text - medium gray */
  --color-success-bg: #ECFDF5;              /* Success background - light green */
  --color-success-fg: #065F46;              /* Success text - dark green */
  --color-warning-bg: #FEF3C7;              /* Warning background - light amber */
  --color-warning-fg: #92400E;              /* Warning text - dark amber */
  --color-error-bg: #FEE2E2;                /* Error background - light red */
  --color-error-fg: #7F1D1D;                /* Error text - dark red */
  --color-info-bg: hsl(172,55%,95%);         /* Info background - light teal */
  --color-info-fg: hsl(172,55%,24%);         /* Info text - dark teal */

  /* ==================== SPACING (8-point grid) ==================== */
  --spacing-0:    0;
  --spacing-xs:   0.25rem;   /* 4px - fine-tuning */
  --spacing-sm:   0.5rem;    /* 8px */
  --spacing-md:   1rem;      /* 16px */
  --spacing-lg:   1.5rem;    /* 24px */
  --spacing-xl:   2rem;      /* 32px */
  --spacing-2xl:  3rem;      /* 48px */
  --spacing-3xl:  4rem;      /* 64px */
  --spacing-4xl:  6rem;      /* 96px */

  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families - System fonts for performance (Vercel-style) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font Sizes - 1.200 ratio (Major Third scale) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px - body default */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px - H1 */

  /* Line Heights - Optimized for readability (4pt multiples for baseline grid) */
  --leading-none:    1;
  --leading-tight:   1.25;     /* 125% - headings */
  --leading-snug:    1.375;    /* 137.5% */
  --leading-normal:  1.5;      /* 150% - body default */
  --leading-relaxed: 1.625;    /* 162.5% */
  --leading-loose:   2;        /* 200% */

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* Font Weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ==================== BORDER RADIUS (8pt grid) ==================== */
  --radius-none:  0;
  --radius-sm:    0.25rem;   /* 4px */
  --radius-md:    0.5rem;    /* 8px */
  --radius-lg:    0.75rem;   /* 12px */
  --radius-xl:    1rem;      /* 16px */
  --radius-2xl:   1.5rem;    /* 24px */
  --radius-full:  9999px;

  /* ==================== SHADOWS (Subtle - Linear/Vercel style) ==================== */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1),
                 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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 25px -5px rgb(0 0 0 / 0.15),
                 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ==================== TRANSITIONS (Fast, smooth) ==================== */
  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   200ms;
  --duration-slower: 300ms;

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy transition names */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== Z-INDEX SCALE ==================== */
  --z-base:          0;
  --z-dropdown:      1000;
  --z-sticky:        1020;
  --z-fixed:         1030;
  --z-modal-backdrop:1040;
  --z-modal:         1050;
  --z-popover:       1060;
  --z-tooltip:       1070;
  --z-toast:         1080;

  /* ==================== CHART COLORS (Data Visualization) ==================== */
  --chart-1: hsl(172, 55%, 32%);  /* Blue */
  --chart-2: oklch(0.60 0.15 145);  /* Green */
  --chart-3: oklch(0.65 0.15 85);   /* Amber */
  --chart-4: oklch(0.60 0.15 330);  /* Purple */
  --chart-5: oklch(0.55 0.15 25);   /* Red */
  --chart-grid: var(--border-muted);
  --chart-text: var(--text-tertiary);
}

/* Dark mode intentionally disabled — Connexus is a light-mode-only platform */

/* Ensure logos render dark against light background */
.logo-image,
.landing-logo img,
.auth-logo-wide {
  filter: brightness(0) saturate(100%);
}

/* ==================== GLOBAL RESETS ==================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== UTILITY CLASSES ==================== */

/* Text colors */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-disabled  { color: var(--text-disabled); }
.text-inverse   { color: var(--text-inverse); }
.text-link      { color: var(--text-link); }

/* Font sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Font weights */
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* Letter spacing */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Spacing */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* ==================== COMPONENT BASE CLASSES ==================== */

/* Card */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--spacing-lg);
  transition: var(--transition-base);
}

.card-body {
  padding: 0;
}

.card.hover-lift:hover {
  border-color: hsl(172 55% 32% / 0.3);
  box-shadow: 0 4px 16px -4px hsl(172 55% 32% / 0.15),
              0 2px 8px -2px oklch(0 0 0 / 0.08);
  /* transform removed — no jiggle */
}

/* Icon Containers - Branded with subtle glow */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-connexus-blue-subtle) 0%, var(--bg-tertiary) 100%);
  border: 1px solid hsl(172 55% 32% / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-base) var(--ease-out);
}

.icon-box svg {
  width: 20px;
  height: 20px;
  color: var(--color-connexus-blue);
  transition: all var(--duration-base) var(--ease-out);
}

.icon-box-lg {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xl);
}

.icon-box-lg svg {
  width: 26px;
  height: 26px;
}

/* Icon box hover effect */
.card:hover .icon-box,
.hover-lift:hover .icon-box {
  background: linear-gradient(135deg, var(--color-connexus-blue) 0%, var(--color-connexus-blue-dark) 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px hsl(172 55% 32% / 0.25);
  transform: scale(1.05);
}

.card:hover .icon-box svg,
.hover-lift:hover .icon-box svg {
  color: var(--text-inverse);
}

/* ==================== BUTTONS (Vercel/Linear-inspired) ==================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-in-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0 0 0 / 0.1);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button - Wanda-aligned */
.btn-primary {
  background: #1A1D23;
  color: #ffffff;
  border-color: #1A1D23;
  box-shadow: none;
  border-radius: 6px;
  min-height: 40px;
}

.btn-primary:hover:not(:disabled) {
  background: #2D3139;
  border-color: #2D3139;
  box-shadow: none;
  transform: none;
}

/* Platform-wide primary action color normalization */
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

button.btn-primary:hover:not(:disabled),
a.btn-primary:hover,
input.btn-primary:hover,
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

/* Secondary Button - Subtle */
.btn-secondary {
  background-color: transparent;
  color: #1A1D23;
  border-color: #E6E8EC;
  border-radius: 6px;
  min-height: 40px;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #F7F8FA;
  border-color: #E6E8EC;
  color: #1A1D23;
}

/* Ghost Button - Minimal */
.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Button sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: var(--text-xs);
  height: 32px;
}

.btn-md {
  padding: 8px 16px;
  font-size: var(--text-sm);
  height: 40px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: var(--text-base);
  height: 48px;
}

/* ==================== BADGES ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.badge-gray {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.badge-blue {
  background-color: hsl(172, 55%, 92%);
  color: hsl(172, 55%, 24%);
}

.badge-green {
  background-color: oklch(0.90 0.05 145);
  color: oklch(0.35 0.15 145);
}

.badge-red {
  background-color: oklch(0.90 0.05 25);
  color: oklch(0.45 0.20 25);
}

.badge-yellow {
  background-color: oklch(0.90 0.05 85);
  color: oklch(0.45 0.15 85);
}

/* Input */
.input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.input:hover {
  border-color: var(--border-color-hover);
}

.input:focus {
  outline: none;
  border-color: var(--border-color-focus);
  box-shadow: 0 0 0 3px hsla(172,55%,32%,0.1);
}

.input::placeholder {
  color: var(--text-disabled);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
}

/* ==================== LAYOUT UTILITIES ==================== */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* ==================== RESPONSIVE GRID ==================== */

.grid {
  display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==================== ANIMATIONS ==================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideInDown {
  from {
    opacity: 0;
    /* transform removed — no jiggle */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-fadeIn {
  animation: fadeIn var(--transition-base);
}

.animate-slideInUp {
  animation: slideInUp var(--transition-base);
}

.animate-slideInDown {
  animation: slideInDown var(--transition-base);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==================== HOVER EFFECTS (Linear-style subtle) ==================== */

.hover-lift {
  transition: all var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
  /* transform removed — no jiggle */  /* Subtle 1px lift like Linear */
  box-shadow: var(--shadow-sm);
}

.hover-border {
  transition: border-color var(--duration-base) var(--ease-in-out);
}

.hover-border:hover {
  border-color: var(--border-hover);
}

.hover-bg {
  transition: background-color var(--duration-base) var(--ease-in-out);
}

.hover-bg:hover {
  background-color: var(--bg-hover);
}

/* ==================== LOADING STATES ==================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary) 20%,
    var(--color-connexus-blue-subtle) 50%,
    var(--bg-tertiary) 80%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== PAGE LAYOUTS ==================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  gap: var(--spacing-lg);
}

.page-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
  margin: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-neutral-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ==================== KEYBOARD SHORTCUTS ==================== */

.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 0 var(--border-default);
}

/* ==================== ALERTS ==================== */

.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}

.alert-success {
  background-color: oklch(0.95 0.03 145);
  color: oklch(0.30 0.15 145);
  border-color: oklch(0.85 0.08 145);
}

.alert-warning {
  background-color: oklch(0.95 0.03 85);
  color: oklch(0.35 0.15 85);
  border-color: oklch(0.85 0.08 85);
}

.alert-error {
  background-color: oklch(0.95 0.03 25);
  color: oklch(0.40 0.20 25);
  border-color: oklch(0.85 0.08 25);
}

.alert-info {
  background-color: hsl(172, 55%, 95%);
  color: oklch(0.35 0.15 250);
  border-color: oklch(0.85 0.08 250);
}

/* ==================== FOCUS STATES (WCAG AA Accessibility) ==================== */

*:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0 0 0 / 0.1);
}

/* ==================== METRIC CARDS (Dashboard) ==================== */

.metric-card {
  padding: var(--spacing-md);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.metric-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xs);
}

.metric-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-none);
}

.metric-change {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.metric-change.positive {
  color: var(--color-success);
}

.metric-change.negative {
  color: var(--color-error);
}

/* ==================== TABLE STYLES (Retool-inspired) ==================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.table-header th {
  padding: var(--spacing-md) var(--spacing-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.table-body tr {
  border-bottom: 1px solid var(--border-default);
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.table-body tr:hover {
  background-color: var(--bg-hover);
}

.table-body td {
  padding: var(--spacing-md) var(--spacing-sm);
  color: var(--text-secondary);
}

.table-body td:first-child {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* ==================== WOW FACTOR ENHANCEMENTS ==================== */

/* Featured Card with Gradient Border */
.card-featured {
  position: relative;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--color-connexus-blue-subtle) 100%);
  border: 1px solid hsl(172 55% 32% / 0.2);
}

.card-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-connexus-blue) 0%, var(--color-connexus-blue-light) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Enhanced Link Hover with Brand Color */
a:not(.btn):not(.hero-btn):not(.nav-item):not(.sidebar-link):not(.workspace-nav-link):not(.workspace-mode-btn):not(.user-menu-item):not(.logo):not(.landing-logo) {
  color: var(--text-link);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}

a:not(.btn):not(.hero-btn):not(.nav-item):not(.sidebar-link):not(.workspace-nav-link):not(.workspace-mode-btn):not(.user-menu-item):not(.logo):not(.landing-logo):hover {
  color: var(--color-connexus-blue-dark);
}

a:not(.btn):not(.hero-btn):not(.nav-item):not(.sidebar-link):not(.workspace-nav-link):not(.workspace-mode-btn):not(.user-menu-item):not(.logo):not(.landing-logo)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-connexus-blue) 0%, var(--color-connexus-blue-light) 100%);
  transition: width var(--duration-base) var(--ease-out);
}

a:not(.btn):not(.hero-btn):not(.nav-item):not(.sidebar-link):not(.workspace-nav-link):not(.workspace-mode-btn):not(.user-menu-item):not(.logo):not(.landing-logo):hover::after {
  width: 100%;
}

/* Glowing Focus Ring with Brand Color */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsl(172 55% 32% / 0.3);
}

button:focus-visible,
.btn:focus-visible,
.input:focus-visible {
  box-shadow: 0 0 0 3px hsl(172 55% 32% / 0.2),
              0 0 16px hsl(172 55% 32% / 0.15);
}

/* Animated Gradient Background Option */
.bg-gradient-connexus {
  background: linear-gradient(135deg, 
    var(--bg-primary) 0%, 
    var(--color-connexus-blue-subtle) 50%, 
    var(--bg-primary) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Enhanced Badge with Glow */
.badge-connexus {
  background: linear-gradient(135deg, var(--color-connexus-blue) 0%, var(--color-connexus-blue-dark) 100%);
  color: var(--text-inverse);
  box-shadow: 0 2px 8px hsl(172 55% 32% / 0.3);
}

/* Metric Card with Accent */
.metric-card-featured {
  border-left: 3px solid var(--color-connexus-blue);
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--color-connexus-blue-subtle) 100%);
}

/* Smooth Page Fade In */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageEnter 0.3s ease-out;
}

/* Pulse Glow Animation for Important Elements */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(172 55% 32% / 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px hsl(172 55% 32% / 0.2);
  }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Geometric Pattern Background (Subtle) */
.bg-pattern {
  background-image: 
    linear-gradient(30deg, hsl(172 55% 32% / 0.02) 12%, transparent 12.5%, transparent 87%, hsl(172 55% 32% / 0.02) 87.5%, hsl(172 55% 32% / 0.02)),
    linear-gradient(150deg, hsl(172 55% 32% / 0.02) 12%, transparent 12.5%, transparent 87%, hsl(172 55% 32% / 0.02) 87.5%, hsl(172 55% 32% / 0.02)),
    linear-gradient(30deg, hsl(172 55% 32% / 0.02) 12%, transparent 12.5%, transparent 87%, hsl(172 55% 32% / 0.02) 87.5%, hsl(172 55% 32% / 0.02)),
    linear-gradient(150deg, hsl(172 55% 32% / 0.02) 12%, transparent 12.5%, transparent 87%, hsl(172 55% 32% / 0.02) 87.5%, hsl(172 55% 32% / 0.02)),
    linear-gradient(60deg, hsl(172 55% 32% / 0.04) 25%, transparent 25.5%, transparent 75%, hsl(172 55% 32% / 0.04) 75%, hsl(172 55% 32% / 0.04)),
    linear-gradient(60deg, hsl(172 55% 32% / 0.04) 25%, transparent 25.5%, transparent 75%, hsl(172 55% 32% / 0.04) 75%, hsl(172 55% 32% / 0.04));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* Counter Animation for Stats */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-count {
  animation: countUp 0.5s ease-out;
}

/* Glass Card Effect (Subtle) */
.card-glass {
  background: oklch(1 0 0 / 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid hsl(172 55% 32% / 0.15);
  box-shadow: 0 8px 32px hsl(172 55% 32% / 0.1);
}

/* ==================== NEW: VISUAL EFFECTS (Glass, Glow, Interactive) ==================== */

/* Glass Morphism Effects */
.glass,
.glass-subtle {
  backdrop-filter: blur(20px);
  background-color: oklch(1 0 0 / 0.8);
  border: 1px solid oklch(1 0 0 / 0.2);
}

.glass-subtle {
  backdrop-filter: blur(12px);
  background-color: oklch(1 0 0 / 0.6);
}

/* Glow Effects */
.glow-primary {
  box-shadow: 0 0 20px hsl(172 55% 32% / 0.25), 0 0 40px hsl(172 55% 32% / 0.1);
}

.glow-primary-subtle {
  box-shadow: 0 0 12px hsl(172 55% 32% / 0.15);
}

/* Card Interactive - Hover Lift with Glow */
.card-interactive {
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
}

.card-interactive:hover {
  /* transform removed — no jiggle */
  box-shadow: var(--glow-primary);
  border-color: var(--color-primary);
}

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

/* Animated Gradient Border */
.border-glow-animated {
  position: relative;
  border: 2px solid;
  border-image: linear-gradient(90deg, var(--color-primary), hsl(172 55% 28%)) 1;
  animation: borderGlowRotate 6s linear infinite;
}

@keyframes borderGlowRotate {
  0% {
    border-image: linear-gradient(90deg, var(--color-primary), hsl(172 55% 28%)) 1;
  }
  50% {
    border-image: linear-gradient(180deg, var(--color-primary), hsl(172 55% 28%)) 1;
  }
  100% {
    border-image: linear-gradient(90deg, var(--color-primary), hsl(172 55% 28%)) 1;
  }
}

/* Scroll Reveal Animations */
.reveal-up {
  animation: revealUp 0.6s ease-out;
}

.reveal-fade {
  animation: revealFade 0.6s ease-out;
}

.reveal-scale {
  animation: revealScale 0.6s ease-out;
}

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

@keyframes revealFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Stagger Delays for Sequential Animations */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

/* Badge Variants (Enhanced) */
.badge-success {
  background-color: hsl(145 60% 95%);
  color: hsl(145 60% 28%);
}

.badge-warning {
  background-color: hsl(38 92% 95%);
  color: hsl(38 75% 32%);
}

.badge-info {
  background-color: hsl(210 55% 95%);
  color: hsl(210 55% 30%);
}

.badge-glow {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  box-shadow: 0 0 12px var(--color-primary-glow);
}