/**
 * ============================================================================
 * SQUARE DESIGN SYSTEM
 * A complete CSS design system inspired by Square's payment UI
 * ============================================================================
 *
 * Usage: Import this file and use the CSS custom properties (variables)
 * and utility classes throughout your project.
 *
 * @version 1.0.0
 * @license MIT
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================ */

:root {
  /* -------------------------------------------------------------------------
     COLOR SYSTEM
     ------------------------------------------------------------------------- */

  /* Primary Colors */
  --sq-black: #000000;
  --sq-white: #FFFFFF;
  --sq-blue: #006AFF;           /* Square's signature action blue */
  --sq-blue-hover: #0052CC;
  --sq-blue-active: #003D99;
  --sq-blue-light: #E6F0FF;

  /* Neutral Grays */
  --sq-gray-50: #FAFAFA;
  --sq-gray-100: #F5F5F5;
  --sq-gray-200: #EEEEEE;
  --sq-gray-300: #E0E0E0;
  --sq-gray-400: #BDBDBD;
  --sq-gray-500: #9E9E9E;
  --sq-gray-600: #757575;
  --sq-gray-700: #616161;
  --sq-gray-800: #424242;
  --sq-gray-900: #212121;

  /* Semantic Colors */
  --sq-success: #00A86B;
  --sq-success-light: #E6F7F0;
  --sq-success-dark: #007A4D;

  --sq-error: #FF1600;
  --sq-error-light: #FFE6E3;
  --sq-error-dark: #CC1200;

  --sq-warning: #FFA000;
  --sq-warning-light: #FFF3E0;
  --sq-warning-dark: #CC8000;

  --sq-info: #006AFF;
  --sq-info-light: #E6F0FF;

  /* Background Colors */
  --sq-bg-primary: #FFFFFF;
  --sq-bg-secondary: #F5F5F5;
  --sq-bg-tertiary: #EEEEEE;
  --sq-bg-elevated: #FFFFFF;
  --sq-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --sq-text-primary: #212121;
  --sq-text-secondary: #757575;
  --sq-text-tertiary: #9E9E9E;
  --sq-text-disabled: #BDBDBD;
  --sq-text-inverse: #FFFFFF;
  --sq-text-link: #006AFF;
  --sq-text-error: #FF1600;

  /* Border Colors */
  --sq-border-default: #E0E0E0;
  --sq-border-hover: #BDBDBD;
  --sq-border-focus: #006AFF;
  --sq-border-error: #FF1600;
  --sq-border-success: #00A86B;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */

  /* Font Families */
  --sq-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sq-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* Font Sizes */
  --sq-text-xs: 0.75rem;        /* 12px */
  --sq-text-sm: 0.875rem;       /* 14px */
  --sq-text-base: 1rem;         /* 16px */
  --sq-text-lg: 1.125rem;       /* 18px */
  --sq-text-xl: 1.25rem;        /* 20px */
  --sq-text-2xl: 1.5rem;        /* 24px */
  --sq-text-3xl: 1.875rem;      /* 30px */
  --sq-text-4xl: 2.25rem;       /* 36px */
  --sq-text-5xl: 3rem;          /* 48px */

  /* Line Heights */
  --sq-leading-none: 1;
  --sq-leading-tight: 1.25;
  --sq-leading-snug: 1.375;
  --sq-leading-normal: 1.5;
  --sq-leading-relaxed: 1.625;
  --sq-leading-loose: 2;

  /* Font Weights */
  --sq-font-thin: 100;
  --sq-font-light: 300;
  --sq-font-normal: 400;
  --sq-font-medium: 500;
  --sq-font-semibold: 600;
  --sq-font-bold: 700;
  --sq-font-black: 900;

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

  /* -------------------------------------------------------------------------
     SPACING
     ------------------------------------------------------------------------- */

  --sq-space-0: 0;
  --sq-space-px: 1px;
  --sq-space-0-5: 0.125rem;     /* 2px */
  --sq-space-1: 0.25rem;        /* 4px */
  --sq-space-1-5: 0.375rem;     /* 6px */
  --sq-space-2: 0.5rem;         /* 8px */
  --sq-space-2-5: 0.625rem;     /* 10px */
  --sq-space-3: 0.75rem;        /* 12px */
  --sq-space-3-5: 0.875rem;     /* 14px */
  --sq-space-4: 1rem;           /* 16px */
  --sq-space-5: 1.25rem;        /* 20px */
  --sq-space-6: 1.5rem;         /* 24px */
  --sq-space-7: 1.75rem;        /* 28px */
  --sq-space-8: 2rem;           /* 32px */
  --sq-space-9: 2.25rem;        /* 36px */
  --sq-space-10: 2.5rem;        /* 40px */
  --sq-space-12: 3rem;          /* 48px */
  --sq-space-14: 3.5rem;        /* 56px */
  --sq-space-16: 4rem;          /* 64px */
  --sq-space-20: 5rem;          /* 80px */
  --sq-space-24: 6rem;          /* 96px */
  --sq-space-32: 8rem;          /* 128px */

  /* -------------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------------- */

  --sq-radius-none: 0;
  --sq-radius-sm: 0.125rem;     /* 2px */
  --sq-radius-default: 0.25rem; /* 4px */
  --sq-radius-md: 0.375rem;     /* 6px - Square's primary radius */
  --sq-radius-lg: 0.5rem;       /* 8px */
  --sq-radius-xl: 0.75rem;      /* 12px */
  --sq-radius-2xl: 1rem;        /* 16px */
  --sq-radius-3xl: 1.5rem;      /* 24px */
  --sq-radius-full: 9999px;

  /* -------------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------------- */

  --sq-shadow-none: none;
  --sq-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sq-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --sq-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --sq-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --sq-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --sq-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --sq-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Focus Ring Shadow */
  --sq-shadow-focus: 0 0 0 3px rgba(0, 106, 255, 0.4);
  --sq-shadow-focus-error: 0 0 0 3px rgba(255, 22, 0, 0.4);

  /* -------------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------------- */

  --sq-transition-fast: 150ms;
  --sq-transition-base: 200ms;
  --sq-transition-slow: 300ms;
  --sq-transition-slower: 500ms;

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

  /* -------------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------------- */

  --sq-z-base: 0;
  --sq-z-dropdown: 1000;
  --sq-z-sticky: 1020;
  --sq-z-fixed: 1030;
  --sq-z-modal-backdrop: 1040;
  --sq-z-modal: 1050;
  --sq-z-popover: 1060;
  --sq-z-tooltip: 1070;
  --sq-z-toast: 1080;

  /* -------------------------------------------------------------------------
     BREAKPOINTS (for reference in media queries)
     ------------------------------------------------------------------------- */

  --sq-breakpoint-sm: 640px;
  --sq-breakpoint-md: 768px;
  --sq-breakpoint-lg: 1024px;
  --sq-breakpoint-xl: 1280px;
  --sq-breakpoint-2xl: 1536px;
}

/* ============================================================================
   DARK MODE TOKENS
   ============================================================================ */

[data-theme="dark"],
.sq-dark,
.dark {
  /* Background Colors */
  --sq-bg-primary: #121212;
  --sq-bg-secondary: #1E1E1E;
  --sq-bg-tertiary: #2D2D2D;
  --sq-bg-elevated: #1E1E1E;

  /* Text Colors */
  --sq-text-primary: #FFFFFF;
  --sq-text-secondary: #B0B0B0;
  --sq-text-tertiary: #808080;
  --sq-text-disabled: #606060;

  /* Border Colors */
  --sq-border-default: #2D2D2D;
  --sq-border-hover: #404040;

  /* Neutral Grays (inverted) */
  --sq-gray-50: #1A1A1A;
  --sq-gray-100: #212121;
  --sq-gray-200: #2D2D2D;
  --sq-gray-300: #404040;
  --sq-gray-400: #606060;
  --sq-gray-500: #808080;
  --sq-gray-600: #A0A0A0;
  --sq-gray-700: #B0B0B0;
  --sq-gray-800: #D0D0D0;
  --sq-gray-900: #EEEEEE;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Headings */
.sq-h1 {
  font-size: var(--sq-text-5xl);
  font-weight: var(--sq-font-bold);
  line-height: var(--sq-leading-tight);
  letter-spacing: var(--sq-tracking-tight);
  color: var(--sq-text-primary);
  margin: 0;
}

.sq-h2 {
  font-size: var(--sq-text-4xl);
  font-weight: var(--sq-font-bold);
  line-height: var(--sq-leading-tight);
  letter-spacing: var(--sq-tracking-tight);
  color: var(--sq-text-primary);
  margin: 0;
}

.sq-h3 {
  font-size: var(--sq-text-3xl);
  font-weight: var(--sq-font-semibold);
  line-height: var(--sq-leading-snug);
  color: var(--sq-text-primary);
  margin: 0;
}

.sq-h4 {
  font-size: var(--sq-text-2xl);
  font-weight: var(--sq-font-semibold);
  line-height: var(--sq-leading-snug);
  color: var(--sq-text-primary);
  margin: 0;
}

.sq-h5 {
  font-size: var(--sq-text-xl);
  font-weight: var(--sq-font-medium);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  margin: 0;
}

.sq-h6 {
  font-size: var(--sq-text-lg);
  font-weight: var(--sq-font-medium);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  margin: 0;
}

/* Body Text */
.sq-body-lg {
  font-size: var(--sq-text-lg);
  line-height: var(--sq-leading-relaxed);
  color: var(--sq-text-primary);
}

.sq-body {
  font-size: var(--sq-text-base);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
}

.sq-body-sm {
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-secondary);
}

.sq-body-xs {
  font-size: var(--sq-text-xs);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-tertiary);
}

/* Labels */
.sq-label {
  font-size: var(--sq-text-sm);
  font-weight: var(--sq-font-medium);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  display: block;
  margin-bottom: var(--sq-space-1-5);
}

.sq-label-required::after {
  content: " *";
  color: var(--sq-error);
}

/* Caption / Helper Text */
.sq-caption {
  font-size: var(--sq-text-xs);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-tertiary);
}

.sq-helper-text {
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-secondary);
  margin-top: var(--sq-space-1);
}

.sq-error-text {
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-error);
  margin-top: var(--sq-space-1);
}

/* Links */
.sq-link {
  color: var(--sq-text-link);
  text-decoration: none;
  transition: color var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-link:hover {
  color: var(--sq-blue-hover);
  text-decoration: underline;
}

.sq-link:active {
  color: var(--sq-blue-active);
}

/* ============================================================================
   BUTTON COMPONENTS
   ============================================================================ */

.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sq-space-2);
  padding: var(--sq-space-3) var(--sq-space-5);
  font-family: var(--sq-font-sans);
  font-size: var(--sq-text-base);
  font-weight: var(--sq-font-medium);
  line-height: var(--sq-leading-normal);
  text-decoration: none;
  border: none;
  border-radius: var(--sq-radius-md);
  cursor: pointer;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
  outline: none;
  color: var(--sq-text-primary);
}

/* Explicit text color classes should override button defaults - must be !important to beat specificity */
.sq-btn.text-white,
.dark .sq-btn.text-white,
[data-theme="dark"] .sq-btn.text-white {
  color: #FFFFFF !important;
}

/* Dark mode buttons without explicit text color should use white text */
.dark .sq-btn,
[data-theme="dark"] .sq-btn {
  color: var(--sq-text-primary);
}

.sq-btn:focus-visible {
  box-shadow: var(--sq-shadow-focus);
}

.sq-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button */
.sq-btn-primary {
  background-color: var(--sq-blue);
  color: var(--sq-white);
}

.sq-btn-primary:hover:not(:disabled) {
  background-color: var(--sq-blue-hover);
}

.sq-btn-primary:active:not(:disabled) {
  background-color: var(--sq-blue-active);
}

/* Secondary Button */
.sq-btn-secondary {
  background-color: transparent;
  color: var(--sq-text-primary);
  border: 1px solid var(--sq-border-default);
}

.sq-btn-secondary:hover:not(:disabled) {
  background-color: var(--sq-gray-100);
  border-color: var(--sq-border-hover);
}

.sq-btn-secondary:active:not(:disabled) {
  background-color: var(--sq-gray-200);
}

/* Ghost Button */
.sq-btn-ghost {
  background-color: transparent;
  color: var(--sq-text-primary);
}

.sq-btn-ghost:hover:not(:disabled) {
  background-color: var(--sq-gray-100);
}

.sq-btn-ghost:active:not(:disabled) {
  background-color: var(--sq-gray-200);
}

/* Destructive Button */
.sq-btn-destructive {
  background-color: var(--sq-error);
  color: var(--sq-white);
}

.sq-btn-destructive:hover:not(:disabled) {
  background-color: var(--sq-error-dark);
}

.sq-btn-destructive:focus-visible {
  box-shadow: var(--sq-shadow-focus-error);
}

/* Success Button */
.sq-btn-success {
  background-color: var(--sq-success);
  color: var(--sq-white);
}

.sq-btn-success:hover:not(:disabled) {
  background-color: var(--sq-success-dark);
}

/* Warning Button */
.sq-btn-warning {
  background-color: var(--sq-warning);
  color: var(--sq-white);
}

.sq-btn-warning:hover:not(:disabled) {
  background-color: var(--sq-warning-dark);
}

/* Button Sizes */
.sq-btn-sm {
  padding: var(--sq-space-2) var(--sq-space-3);
  font-size: var(--sq-text-sm);
}

.sq-btn-lg {
  padding: var(--sq-space-4) var(--sq-space-6);
  font-size: var(--sq-text-lg);
}

.sq-btn-xl {
  padding: var(--sq-space-5) var(--sq-space-8);
  font-size: var(--sq-text-xl);
}

/* Full Width Button */
.sq-btn-full {
  width: 100%;
}

/* Icon Button */
.sq-btn-icon {
  padding: var(--sq-space-3);
  aspect-ratio: 1;
}

.sq-btn-icon.sq-btn-sm {
  padding: var(--sq-space-2);
}

.sq-btn-icon.sq-btn-lg {
  padding: var(--sq-space-4);
}

/* ============================================================================
   INPUT COMPONENTS
   ============================================================================ */

/* Input Container */
.sq-input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Base Input, Select, Textarea */
.sq-input,
.sq-select,
.sq-textarea {
  width: 100%;
  padding: var(--sq-space-3-5) var(--sq-space-4);
  font-family: var(--sq-font-sans);
  font-size: var(--sq-text-base);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  background-color: var(--sq-bg-primary);
  border: 1px solid var(--sq-border-default);
  border-radius: var(--sq-radius-md);
  outline: none;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-input::placeholder,
.sq-textarea::placeholder {
  color: var(--sq-text-tertiary);
}

.sq-input:hover:not(:disabled):not(:focus),
.sq-select:hover:not(:disabled):not(:focus),
.sq-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--sq-border-hover);
}

.sq-input:focus,
.sq-select:focus,
.sq-textarea:focus {
  border-color: var(--sq-border-focus);
  box-shadow: var(--sq-shadow-focus);
}

.sq-input:disabled,
.sq-select:disabled,
.sq-textarea:disabled {
  background-color: var(--sq-gray-100);
  color: var(--sq-text-disabled);
  cursor: not-allowed;
}

/* Input States */
.sq-input.is-error,
.sq-input-error {
  border-color: var(--sq-border-error);
}

.sq-input.is-error:focus,
.sq-input-error:focus {
  box-shadow: var(--sq-shadow-focus-error);
}

.sq-input.is-success,
.sq-input-success {
  border-color: var(--sq-border-success);
}

/* Input Sizes */
.sq-input-sm {
  padding: var(--sq-space-2) var(--sq-space-3);
  font-size: var(--sq-text-sm);
}

.sq-input-lg {
  padding: var(--sq-space-4) var(--sq-space-5);
  font-size: var(--sq-text-lg);
}

/* Input with Icon */
.sq-input-icon-wrapper {
  position: relative;
}

.sq-input-icon-wrapper .sq-input {
  padding-left: var(--sq-space-10);
}

.sq-input-icon-wrapper .sq-input-icon {
  position: absolute;
  left: var(--sq-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--sq-text-tertiary);
  pointer-events: none;
}

.sq-input-icon-wrapper.sq-input-icon-right .sq-input {
  padding-left: var(--sq-space-4);
  padding-right: var(--sq-space-10);
}

.sq-input-icon-wrapper.sq-input-icon-right .sq-input-icon {
  left: auto;
  right: var(--sq-space-3);
}

/* Textarea */
.sq-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select */
.sq-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sq-space-3) center;
  background-size: 1rem;
  padding-right: var(--sq-space-10);
}

/* ============================================================================
   CARD COMPONENT
   ============================================================================ */

.sq-card {
  background-color: var(--sq-bg-primary);
  border: 1px solid var(--sq-border-default);
  border-radius: var(--sq-radius-lg);
  padding: var(--sq-space-6);
  box-shadow: var(--sq-shadow-sm);
}

.sq-card-elevated {
  box-shadow: var(--sq-shadow-md);
  border: none;
}

.sq-card-interactive {
  cursor: pointer;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-card-interactive:hover {
  box-shadow: var(--sq-shadow-lg);
  transform: translateY(-2px);
}

/* Payment Form Card */
.sq-payment-card {
  background-color: var(--sq-bg-primary);
  border: 1px solid var(--sq-border-default);
  border-radius: var(--sq-radius-md);
  overflow: hidden;
}

.sq-payment-card-header {
  padding: var(--sq-space-4) var(--sq-space-5);
  border-bottom: 1px solid var(--sq-border-default);
}

.sq-payment-card-body {
  padding: var(--sq-space-5);
}

.sq-payment-card-footer {
  padding: var(--sq-space-4) var(--sq-space-5);
  border-top: 1px solid var(--sq-border-default);
  background-color: var(--sq-gray-50);
}

/* ============================================================================
   FORM COMPONENTS
   ============================================================================ */

/* Form Group */
.sq-form-group {
  margin-bottom: var(--sq-space-5);
}

/* Form Row (for inline fields) */
.sq-form-row {
  display: flex;
  gap: var(--sq-space-4);
}

.sq-form-row > * {
  flex: 1;
}

/* Checkbox */
.sq-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--sq-space-2);
  cursor: pointer;
}

.sq-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sq-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.sq-checkbox-label {
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  user-select: none;
}

/* Radio */
.sq-radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--sq-space-2);
  cursor: pointer;
}

.sq-radio {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sq-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.sq-radio-label {
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
  color: var(--sq-text-primary);
  user-select: none;
}

/* Radio Group */
.sq-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--sq-space-3);
}

.sq-radio-group-horizontal {
  flex-direction: row;
  gap: var(--sq-space-6);
}

/* Toggle / Switch */
.sq-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.sq-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sq-toggle-track {
  width: 44px;
  height: 24px;
  background-color: var(--sq-gray-400);
  border-radius: var(--sq-radius-full);
  transition: background-color var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-toggle-input:checked + .sq-toggle-track {
  background-color: var(--sq-blue);
}

.sq-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--sq-white);
  border-radius: var(--sq-radius-full);
  box-shadow: var(--sq-shadow-sm);
  transition: transform var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-toggle-input:checked + .sq-toggle-track::after {
  transform: translateX(20px);
}

.sq-toggle-input:focus-visible + .sq-toggle-track {
  box-shadow: var(--sq-shadow-focus);
}

/* ============================================================================
   BADGE / CHIP COMPONENT
   ============================================================================ */

.sq-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sq-space-1) var(--sq-space-2);
  font-size: var(--sq-text-xs);
  font-weight: var(--sq-font-medium);
  line-height: var(--sq-leading-tight);
  border-radius: var(--sq-radius-default);
}

.sq-badge-default {
  background-color: var(--sq-gray-200);
  color: var(--sq-text-primary);
}

.sq-badge-primary {
  background-color: var(--sq-blue-light);
  color: var(--sq-blue);
}

.sq-badge-success {
  background-color: var(--sq-success-light);
  color: var(--sq-success-dark);
}

.sq-badge-error {
  background-color: var(--sq-error-light);
  color: var(--sq-error-dark);
}

.sq-badge-warning {
  background-color: var(--sq-warning-light);
  color: var(--sq-warning-dark);
}

/* Pill variant */
.sq-badge-pill {
  border-radius: var(--sq-radius-full);
  padding: var(--sq-space-1) var(--sq-space-3);
}

/* ============================================================================
   ALERT / MESSAGE COMPONENT
   ============================================================================ */

.sq-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sq-space-3);
  padding: var(--sq-space-4);
  border-radius: var(--sq-radius-md);
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-normal);
}

.sq-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.sq-alert-content {
  flex: 1;
}

.sq-alert-title {
  font-weight: var(--sq-font-semibold);
  margin-bottom: var(--sq-space-1);
}

.sq-alert-info {
  background-color: var(--sq-info-light);
  color: var(--sq-blue);
}

.sq-alert-success {
  background-color: var(--sq-success-light);
  color: var(--sq-success-dark);
}

.sq-alert-warning {
  background-color: var(--sq-warning-light);
  color: var(--sq-warning-dark);
}

.sq-alert-error {
  background-color: var(--sq-error-light);
  color: var(--sq-error-dark);
}

/* ============================================================================
   DIVIDER
   ============================================================================ */

.sq-divider {
  height: 1px;
  background-color: var(--sq-border-default);
  border: none;
  margin: var(--sq-space-4) 0;
}

.sq-divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
}

/* ============================================================================
   AVATAR
   ============================================================================ */

.sq-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sq-radius-full);
  background-color: var(--sq-gray-300);
  color: var(--sq-text-primary);
  font-weight: var(--sq-font-medium);
  overflow: hidden;
}

.sq-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sq-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--sq-text-sm);
}

.sq-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--sq-text-xl);
}

.sq-avatar-xl {
  width: 80px;
  height: 80px;
  font-size: var(--sq-text-2xl);
}

/* ============================================================================
   SPINNER / LOADER
   ============================================================================ */

.sq-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--sq-gray-300);
  border-top-color: var(--sq-blue);
  border-radius: var(--sq-radius-full);
  animation: sq-spin 0.8s linear infinite;
}

.sq-spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.sq-spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 4px;
}

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

/* ============================================================================
   TOOLTIP
   ============================================================================ */

.sq-tooltip {
  position: relative;
  display: inline-block;
}

.sq-tooltip-content {
  position: absolute;
  bottom: calc(100% + var(--sq-space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sq-space-2) var(--sq-space-3);
  background-color: var(--sq-gray-900);
  color: var(--sq-white);
  font-size: var(--sq-text-sm);
  line-height: var(--sq-leading-tight);
  border-radius: var(--sq-radius-default);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
  z-index: var(--sq-z-tooltip);
}

.sq-tooltip:hover .sq-tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* ============================================================================
   MODAL / DIALOG
   ============================================================================ */

.sq-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--sq-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--sq-z-modal-backdrop);
}

.sq-modal {
  background-color: var(--sq-bg-primary);
  border-radius: var(--sq-radius-xl);
  box-shadow: var(--sq-shadow-2xl);
  max-width: 500px;
  width: calc(100% - var(--sq-space-8));
  max-height: calc(100vh - var(--sq-space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--sq-z-modal);
}

.sq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sq-space-5);
  border-bottom: 1px solid var(--sq-border-default);
}

.sq-modal-title {
  font-size: var(--sq-text-xl);
  font-weight: var(--sq-font-semibold);
  margin: 0;
}

.sq-modal-close {
  padding: var(--sq-space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--sq-text-secondary);
  transition: color var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-modal-close:hover {
  color: var(--sq-text-primary);
}

.sq-modal-body {
  padding: var(--sq-space-5);
  overflow-y: auto;
  flex: 1;
}

.sq-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sq-space-3);
  padding: var(--sq-space-5);
  border-top: 1px solid var(--sq-border-default);
}

/* ============================================================================
   TABLE
   ============================================================================ */

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

.sq-table th,
.sq-table td {
  padding: var(--sq-space-3) var(--sq-space-4);
  text-align: left;
  border-bottom: 1px solid var(--sq-border-default);
}

.sq-table th {
  font-weight: var(--sq-font-semibold);
  color: var(--sq-text-secondary);
  background-color: var(--sq-gray-50);
}

.sq-table tbody tr:hover {
  background-color: var(--sq-gray-50);
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

.sq-progress {
  width: 100%;
  height: 8px;
  background-color: var(--sq-gray-200);
  border-radius: var(--sq-radius-full);
  overflow: hidden;
}

.sq-progress-bar {
  height: 100%;
  background-color: var(--sq-blue);
  border-radius: var(--sq-radius-full);
  transition: width var(--sq-transition-slow) var(--sq-ease-default);
}

.sq-progress-bar-success {
  background-color: var(--sq-success);
}

.sq-progress-bar-warning {
  background-color: var(--sq-warning);
}

.sq-progress-bar-error {
  background-color: var(--sq-error);
}

/* ============================================================================
   SKELETON LOADER
   ============================================================================ */

.sq-skeleton {
  background: linear-gradient(
    90deg,
    var(--sq-gray-200) 25%,
    var(--sq-gray-100) 50%,
    var(--sq-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: sq-shimmer 1.5s infinite;
  border-radius: var(--sq-radius-default);
}

.sq-skeleton-text {
  height: 1em;
  margin-bottom: var(--sq-space-2);
}

.sq-skeleton-text:last-child {
  width: 80%;
}

.sq-skeleton-circle {
  border-radius: var(--sq-radius-full);
}

.sq-skeleton-rect {
  border-radius: var(--sq-radius-md);
}

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

/* ============================================================================
   TABS COMPONENT
   ============================================================================ */

.sq-tabs {
  display: flex;
  gap: var(--sq-space-1);
  border-bottom: 1px solid var(--sq-border-default);
}

.sq-tab {
  padding: var(--sq-space-3) var(--sq-space-4);
  font-size: var(--sq-text-sm);
  font-weight: var(--sq-font-medium);
  color: var(--sq-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
  margin-bottom: -1px;
}

.sq-tab:hover {
  color: var(--sq-text-primary);
}

.sq-tab.active,
.sq-tab[aria-selected="true"] {
  color: var(--sq-blue);
  border-bottom-color: var(--sq-blue);
}

.sq-tab-panel {
  padding: var(--sq-space-5) 0;
}

/* Pill Tabs */
.sq-tabs-pills {
  display: flex;
  gap: var(--sq-space-2);
  background-color: var(--sq-gray-100);
  padding: var(--sq-space-1);
  border-radius: var(--sq-radius-md);
  border-bottom: none;
}

.sq-tabs-pills .sq-tab {
  border-radius: var(--sq-radius-default);
  border-bottom: none;
  margin-bottom: 0;
}

.sq-tabs-pills .sq-tab.active,
.sq-tabs-pills .sq-tab[aria-selected="true"] {
  background-color: var(--sq-white);
  color: var(--sq-text-primary);
  box-shadow: var(--sq-shadow-sm);
}

/* ============================================================================
   SIDEBAR NAVIGATION
   ============================================================================ */

.sq-sidebar {
  width: 280px;
  background-color: var(--sq-bg-primary);
  border-right: 1px solid var(--sq-border-default);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sq-sidebar-header {
  padding: var(--sq-space-5);
  border-bottom: 1px solid var(--sq-border-default);
}

.sq-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sq-space-3);
}

.sq-sidebar-footer {
  padding: var(--sq-space-4);
  border-top: 1px solid var(--sq-border-default);
}

.sq-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sq-space-1);
}

.sq-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sq-space-3);
  padding: var(--sq-space-3) var(--sq-space-4);
  font-size: var(--sq-text-sm);
  font-weight: var(--sq-font-medium);
  color: var(--sq-text-secondary);
  text-decoration: none;
  border-radius: var(--sq-radius-md);
  cursor: pointer;
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-sidebar-item:hover {
  background-color: var(--sq-gray-100);
  color: var(--sq-text-primary);
}

.sq-sidebar-item.active {
  background-color: var(--sq-blue-light);
  color: var(--sq-blue);
}

.sq-sidebar-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sq-sidebar-section {
  margin-bottom: var(--sq-space-4);
}

.sq-sidebar-section-title {
  font-size: var(--sq-text-xs);
  font-weight: var(--sq-font-semibold);
  color: var(--sq-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--sq-tracking-wider);
  padding: var(--sq-space-2) var(--sq-space-4);
  margin-bottom: var(--sq-space-1);
}

/* ============================================================================
   STAT CARDS
   ============================================================================ */

.sq-stat-card {
  background-color: var(--sq-bg-primary);
  border: 1px solid var(--sq-border-default);
  border-radius: var(--sq-radius-lg);
  padding: var(--sq-space-5);
}

.sq-stat-label {
  font-size: var(--sq-text-sm);
  font-weight: var(--sq-font-medium);
  color: var(--sq-text-secondary);
  margin-bottom: var(--sq-space-1);
}

.sq-stat-value {
  font-size: var(--sq-text-3xl);
  font-weight: var(--sq-font-bold);
  color: var(--sq-text-primary);
  line-height: var(--sq-leading-tight);
}

.sq-stat-change {
  display: inline-flex;
  align-items: center;
  gap: var(--sq-space-1);
  font-size: var(--sq-text-sm);
  font-weight: var(--sq-font-medium);
  margin-top: var(--sq-space-2);
}

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

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

/* ============================================================================
   DROPDOWN
   ============================================================================ */

.sq-dropdown {
  position: relative;
  display: inline-block;
}

.sq-dropdown-trigger {
  cursor: pointer;
}

.sq-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--sq-bg-primary);
  border: 1px solid var(--sq-border-default);
  border-radius: var(--sq-radius-md);
  box-shadow: var(--sq-shadow-lg);
  padding: var(--sq-space-2);
  margin-top: var(--sq-space-1);
  z-index: var(--sq-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-dropdown.open .sq-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sq-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sq-space-3);
  padding: var(--sq-space-2-5) var(--sq-space-3);
  font-size: var(--sq-text-sm);
  color: var(--sq-text-primary);
  text-decoration: none;
  border-radius: var(--sq-radius-default);
  cursor: pointer;
  transition: background-color var(--sq-transition-fast) var(--sq-ease-default);
}

.sq-dropdown-item:hover {
  background-color: var(--sq-gray-100);
}

.sq-dropdown-divider {
  height: 1px;
  background-color: var(--sq-border-default);
  margin: var(--sq-space-2) 0;
}

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

/* Display */
.sq-hidden { display: none !important; }
.sq-block { display: block; }
.sq-inline { display: inline; }
.sq-inline-block { display: inline-block; }
.sq-flex { display: flex; }
.sq-inline-flex { display: inline-flex; }
.sq-grid { display: grid; }

/* Flexbox */
.sq-flex-row { flex-direction: row; }
.sq-flex-col { flex-direction: column; }
.sq-flex-wrap { flex-wrap: wrap; }
.sq-flex-nowrap { flex-wrap: nowrap; }
.sq-flex-1 { flex: 1 1 0%; }
.sq-flex-auto { flex: 1 1 auto; }
.sq-flex-none { flex: none; }

/* Alignment */
.sq-items-start { align-items: flex-start; }
.sq-items-center { align-items: center; }
.sq-items-end { align-items: flex-end; }
.sq-items-stretch { align-items: stretch; }

.sq-justify-start { justify-content: flex-start; }
.sq-justify-center { justify-content: center; }
.sq-justify-end { justify-content: flex-end; }
.sq-justify-between { justify-content: space-between; }
.sq-justify-around { justify-content: space-around; }

/* Gap */
.sq-gap-1 { gap: var(--sq-space-1); }
.sq-gap-2 { gap: var(--sq-space-2); }
.sq-gap-3 { gap: var(--sq-space-3); }
.sq-gap-4 { gap: var(--sq-space-4); }
.sq-gap-5 { gap: var(--sq-space-5); }
.sq-gap-6 { gap: var(--sq-space-6); }
.sq-gap-8 { gap: var(--sq-space-8); }

/* Margin */
.sq-m-0 { margin: 0; }
.sq-m-auto { margin: auto; }
.sq-mx-auto { margin-left: auto; margin-right: auto; }
.sq-my-auto { margin-top: auto; margin-bottom: auto; }

.sq-mt-1 { margin-top: var(--sq-space-1); }
.sq-mt-2 { margin-top: var(--sq-space-2); }
.sq-mt-3 { margin-top: var(--sq-space-3); }
.sq-mt-4 { margin-top: var(--sq-space-4); }
.sq-mt-5 { margin-top: var(--sq-space-5); }
.sq-mt-6 { margin-top: var(--sq-space-6); }
.sq-mt-8 { margin-top: var(--sq-space-8); }

.sq-mb-1 { margin-bottom: var(--sq-space-1); }
.sq-mb-2 { margin-bottom: var(--sq-space-2); }
.sq-mb-3 { margin-bottom: var(--sq-space-3); }
.sq-mb-4 { margin-bottom: var(--sq-space-4); }
.sq-mb-5 { margin-bottom: var(--sq-space-5); }
.sq-mb-6 { margin-bottom: var(--sq-space-6); }
.sq-mb-8 { margin-bottom: var(--sq-space-8); }

/* Padding */
.sq-p-0 { padding: 0; }
.sq-p-1 { padding: var(--sq-space-1); }
.sq-p-2 { padding: var(--sq-space-2); }
.sq-p-3 { padding: var(--sq-space-3); }
.sq-p-4 { padding: var(--sq-space-4); }
.sq-p-5 { padding: var(--sq-space-5); }
.sq-p-6 { padding: var(--sq-space-6); }
.sq-p-8 { padding: var(--sq-space-8); }

/* Width */
.sq-w-full { width: 100%; }
.sq-w-auto { width: auto; }
.sq-max-w-xs { max-width: 20rem; }
.sq-max-w-sm { max-width: 24rem; }
.sq-max-w-md { max-width: 28rem; }
.sq-max-w-lg { max-width: 32rem; }
.sq-max-w-xl { max-width: 36rem; }
.sq-max-w-2xl { max-width: 42rem; }
.sq-max-w-full { max-width: 100%; }

/* Text Alignment */
.sq-text-left { text-align: left; }
.sq-text-center { text-align: center; }
.sq-text-right { text-align: right; }

/* Text Colors */
.sq-text-primary { color: var(--sq-text-primary); }
.sq-text-secondary { color: var(--sq-text-secondary); }
.sq-text-tertiary { color: var(--sq-text-tertiary); }
.sq-text-disabled { color: var(--sq-text-disabled); }
.sq-text-error { color: var(--sq-text-error); }
.sq-text-success { color: var(--sq-success); }
.sq-text-warning { color: var(--sq-warning); }

/* Background Colors */
.sq-bg-primary { background-color: var(--sq-bg-primary); }
.sq-bg-secondary { background-color: var(--sq-bg-secondary); }
.sq-bg-tertiary { background-color: var(--sq-bg-tertiary); }

/* Border */
.sq-border { border: 1px solid var(--sq-border-default); }
.sq-border-0 { border: none; }
.sq-border-t { border-top: 1px solid var(--sq-border-default); }
.sq-border-b { border-bottom: 1px solid var(--sq-border-default); }
.sq-border-l { border-left: 1px solid var(--sq-border-default); }
.sq-border-r { border-right: 1px solid var(--sq-border-default); }

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

/* Shadow */
.sq-shadow-none { box-shadow: var(--sq-shadow-none); }
.sq-shadow-sm { box-shadow: var(--sq-shadow-sm); }
.sq-shadow { box-shadow: var(--sq-shadow-default); }
.sq-shadow-md { box-shadow: var(--sq-shadow-md); }
.sq-shadow-lg { box-shadow: var(--sq-shadow-lg); }
.sq-shadow-xl { box-shadow: var(--sq-shadow-xl); }

/* Overflow */
.sq-overflow-hidden { overflow: hidden; }
.sq-overflow-auto { overflow: auto; }
.sq-overflow-scroll { overflow: scroll; }

/* Position */
.sq-relative { position: relative; }
.sq-absolute { position: absolute; }
.sq-fixed { position: fixed; }
.sq-sticky { position: sticky; }

/* Cursor */
.sq-cursor-pointer { cursor: pointer; }
.sq-cursor-default { cursor: default; }
.sq-cursor-not-allowed { cursor: not-allowed; }

/* Visibility */
.sq-invisible { visibility: hidden; }
.sq-visible { visibility: visible; }

/* Opacity */
.sq-opacity-0 { opacity: 0; }
.sq-opacity-50 { opacity: 0.5; }
.sq-opacity-100 { opacity: 1; }

/* User Select */
.sq-select-none { user-select: none; }
.sq-select-all { user-select: all; }

/* Truncate */
.sq-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* ============================================================================
   INTRO CARD ICON STYLING
   Dark/Light mode fixes for tab intro cards
   ============================================================================ */

/* ============================================================================
   MISSING TAILWIND GRADIENT UTILITIES
   These gradient colors are used in intro cards but missing from tailwind.min.css
   ============================================================================ */

/* Gradient direction */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Violet gradients */
.from-violet-400 { --tw-gradient-from: #a78bfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(167, 139, 250, 0)); }
.from-violet-500 { --tw-gradient-from: #8b5cf6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0)); }
.from-violet-600 { --tw-gradient-from: #7c3aed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(124, 58, 237, 0)); }
.to-violet-600 { --tw-gradient-to: #7c3aed; }
.to-violet-700 { --tw-gradient-to: #6d28d9; }
.via-violet-500 { --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6, var(--tw-gradient-to, rgba(139, 92, 246, 0)); }

/* Purple gradients */
.from-purple-400 { --tw-gradient-from: #c084fc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(192, 132, 252, 0)); }
.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0)); }
.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0)); }
.to-purple-500 { --tw-gradient-to: #a855f7; }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.to-purple-700 { --tw-gradient-to: #7e22ce; }
.via-purple-500 { --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to, rgba(168, 85, 247, 0)); }
.via-purple-600 { --tw-gradient-stops: var(--tw-gradient-from), #9333ea, var(--tw-gradient-to, rgba(147, 51, 234, 0)); }

/* Fuchsia gradients */
.from-fuchsia-400 { --tw-gradient-from: #e879f9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(232, 121, 249, 0)); }
.from-fuchsia-500 { --tw-gradient-from: #d946ef; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 70, 239, 0)); }
.from-fuchsia-600 { --tw-gradient-from: #c026d3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(192, 38, 211, 0)); }
.to-fuchsia-500 { --tw-gradient-to: #d946ef; }
.to-fuchsia-600 { --tw-gradient-to: #c026d3; }
.via-fuchsia-500 { --tw-gradient-stops: var(--tw-gradient-from), #d946ef, var(--tw-gradient-to, rgba(217, 70, 239, 0)); }
.via-fuchsia-600 { --tw-gradient-stops: var(--tw-gradient-from), #c026d3, var(--tw-gradient-to, rgba(192, 38, 211, 0)); }

/* Pink gradients */
.from-pink-400 { --tw-gradient-from: #f472b6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 114, 182, 0)); }
.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0)); }
.from-pink-600 { --tw-gradient-from: #db2777; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 39, 119, 0)); }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-pink-600 { --tw-gradient-to: #db2777; }

/* Rose gradients */
.from-rose-400 { --tw-gradient-from: #fb7185; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 113, 133, 0)); }
.from-rose-500 { --tw-gradient-from: #f43f5e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 63, 94, 0)); }
.from-rose-600 { --tw-gradient-from: #e11d48; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(225, 29, 72, 0)); }
.to-rose-500 { --tw-gradient-to: #f43f5e; }
.to-rose-600 { --tw-gradient-to: #e11d48; }

/* Indigo gradients (extend existing) */
.from-indigo-700 { --tw-gradient-from: #4338ca; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(67, 56, 202, 0)); }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }
.to-indigo-700 { --tw-gradient-to: #4338ca; }
.via-indigo-600 { --tw-gradient-stops: var(--tw-gradient-from), #4f46e5, var(--tw-gradient-to, rgba(79, 70, 229, 0)); }

/* Amber gradients */
.from-amber-400 { --tw-gradient-from: #fbbf24; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0)); }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)); }
.from-amber-600 { --tw-gradient-from: #d97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0)); }
.to-amber-500 { --tw-gradient-to: #f59e0b; }
.to-amber-600 { --tw-gradient-to: #d97706; }

/* Yellow gradients */
.from-yellow-400 { --tw-gradient-from: #facc15; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 204, 21, 0)); }
.from-yellow-500 { --tw-gradient-from: #eab308; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 179, 8, 0)); }
.to-yellow-500 { --tw-gradient-to: #eab308; }

/* Red gradients */
.from-red-400 { --tw-gradient-from: #f87171; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 113, 113, 0)); }
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
.from-red-600 { --tw-gradient-from: #dc2626; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0)); }
.to-red-500 { --tw-gradient-to: #ef4444; }
.to-red-600 { --tw-gradient-to: #dc2626; }

/* Orange gradients (extend existing) */
.from-orange-400 { --tw-gradient-from: #fb923c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 146, 60, 0)); }
.to-orange-500 { --tw-gradient-to: #f97316; }

/* Teal gradients */
.from-teal-400 { --tw-gradient-from: #2dd4bf; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(45, 212, 191, 0)); }
.from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 184, 166, 0)); }
.from-teal-600 { --tw-gradient-from: #0d9488; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13, 148, 136, 0)); }
.to-teal-500 { --tw-gradient-to: #14b8a6; }
.to-teal-600 { --tw-gradient-to: #0d9488; }
.via-teal-500 { --tw-gradient-stops: var(--tw-gradient-from), #14b8a6, var(--tw-gradient-to, rgba(20, 184, 166, 0)); }

/* Cyan gradients */
.from-cyan-400 { --tw-gradient-from: #22d3ee; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 211, 238, 0)); }
.from-cyan-500 { --tw-gradient-from: #06b6d4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)); }
.from-cyan-600 { --tw-gradient-from: #0891b2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(8, 145, 178, 0)); }
.to-cyan-500 { --tw-gradient-to: #06b6d4; }
.to-cyan-600 { --tw-gradient-to: #0891b2; }
.via-cyan-500 { --tw-gradient-stops: var(--tw-gradient-from), #06b6d4, var(--tw-gradient-to, rgba(6, 182, 212, 0)); }

/* Emerald gradients */
.from-emerald-400 { --tw-gradient-from: #34d399; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0)); }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
.from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0)); }
.to-emerald-500 { --tw-gradient-to: #10b981; }
.to-emerald-600 { --tw-gradient-to: #059669; }
.via-emerald-500 { --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgba(16, 185, 129, 0)); }

/* Green gradients (extend existing) */
.from-green-400 { --tw-gradient-from: #4ade80; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 222, 128, 0)); }
.to-green-500 { --tw-gradient-to: #22c55e; }
.to-green-600 { --tw-gradient-to: #16a34a; }
.via-green-500 { --tw-gradient-stops: var(--tw-gradient-from), #22c55e, var(--tw-gradient-to, rgba(34, 197, 94, 0)); }

/* Blue gradients (extend existing) */
.from-blue-700 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
.to-blue-600 { --tw-gradient-to: #2563eb; }
.to-blue-700 { --tw-gradient-to: #1d4ed8; }
.via-blue-500 { --tw-gradient-stops: var(--tw-gradient-from), #3b82f6, var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.via-blue-600 { --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to, rgba(37, 99, 235, 0)); }

/* Slate gradients */
.from-slate-400 { --tw-gradient-from: #94a3b8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(148, 163, 184, 0)); }
.from-slate-500 { --tw-gradient-from: #64748b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(100, 116, 139, 0)); }
.from-slate-600 { --tw-gradient-from: #475569; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(71, 85, 105, 0)); }
.from-slate-700 { --tw-gradient-from: #334155; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(51, 65, 85, 0)); }
.to-slate-500 { --tw-gradient-to: #64748b; }
.to-slate-600 { --tw-gradient-to: #475569; }
.to-slate-700 { --tw-gradient-to: #334155; }

/* Gray gradients (extend existing) */
.from-gray-400 { --tw-gradient-from: #9ca3af; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(156, 163, 175, 0)); }
.from-gray-600 { --tw-gradient-from: #4b5563; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(75, 85, 99, 0)); }
.to-gray-600 { --tw-gradient-to: #4b5563; }
.to-gray-700 { --tw-gradient-to: #374151; }

/* Hero Icon Container - bg-white/20 override for dark mode visibility */
.dark .bg-white\/20,
[data-theme="dark"] .bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Floating decorative elements - bg-white/10 slightly more visible in dark */
.dark .bg-white\/10,
[data-theme="dark"] .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Floating decorative elements - bg-white/5 */
.dark .bg-white\/5,
[data-theme="dark"] .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Feature Card Icon Containers - Add rounded corners */
/* These are the gradient icon boxes inside intro cards and sq-card-interactive */
/* Covers w-10, w-12, w-14, w-16 sizes */
.sq-card-interactive .bg-gradient-to-br.flex.items-center.justify-center,
.sq-card .bg-gradient-to-br.flex.items-center.justify-center,
div[class*="w-10"][class*="h-10"][class*="bg-gradient-to-br"],
div[class*="w-12"][class*="h-12"][class*="bg-gradient-to-br"],
div[class*="w-14"][class*="h-14"][class*="bg-gradient-to-br"],
div[class*="w-16"][class*="h-16"][class*="bg-gradient-to-br"] {
  border-radius: var(--sq-radius-xl, 0.75rem);
}

/* Intro card drop shadows - enhance for both modes */
.drop-shadow-lg {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

.dark .drop-shadow-lg,
[data-theme="dark"] .drop-shadow-lg {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
}

/* Text shadow for intro card headings */
h1.drop-shadow-lg {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  filter: none;
}

.dark h1.drop-shadow-lg,
[data-theme="dark"] h1.drop-shadow-lg {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  filter: none;
}

/* Intro card white text opacity adjustments for dark mode */
.dark .text-white\/90,
[data-theme="dark"] .text-white\/90 {
  color: rgba(255, 255, 255, 0.95);
}

/* Ensure feature card icons remain crisp white on gradient backgrounds */
.sq-card-interactive svg.text-white,
.sq-card svg.text-white,
div[class*="bg-gradient-to-br"] svg.text-white {
  color: #FFFFFF;
  opacity: 1;
}

/* Icon container transition for smooth hover effects */
div[class*="bg-gradient-to-br"].flex.items-center.justify-center {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon container hover state enhancement */
.sq-card-interactive:hover div[class*="bg-gradient-to-br"].flex.items-center.justify-center,
.group:hover div[class*="bg-gradient-to-br"].flex.items-center.justify-center {
  transform: scale(1.05);
}