@layer base {
  :root {
    /* Base colors - Clean professional palette */
    --background: 0 0% 100%;
    --foreground: 215 28% 17%;

    /* Card system */
    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;

    /* Popover system */
    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;

    /* Primary - Professional teal/blue */
    --primary: 194 74% 42%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 194 74% 55%;

    /* Secondary - Subtle blue-gray */
    --secondary: 214 32% 96%;
    --secondary-foreground: 215 28% 17%;

    /* Muted system */
    --muted: 214 32% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent - Vibrant teal */
    --accent: 185 84% 44%;
    --accent-foreground: 0 0% 100%;

    /* Success - Professional green */
    --success: 151 80% 40%;
    --success-foreground: 0 0% 100%;

    /* Warning - Amber */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Borders and inputs */
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 194 74% 42%;

    /* Gradients for modern B2B interface */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary)));
    --gradient-card: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted)));

    /* Shadows for depth */
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-elevated: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-floating: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px hsl(var(--primary) / 0.3);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;

    --radius: 0.75rem;
  }

  .dark {
    /* Dark mode colors - Professional dark theme */
    --background: 215 28% 9%;
    --foreground: 0 0% 95%;

    --card: 215 28% 12%;
    --card-foreground: 0 0% 95%;

    --popover: 215 28% 12%;
    --popover-foreground: 0 0% 95%;

    --primary: 194 74% 55%;
    --primary-foreground: 215 28% 9%;
    --primary-glow: 194 74% 65%;

    --secondary: 215 28% 16%;
    --secondary-foreground: 0 0% 95%;

    --muted: 215 28% 16%;
    --muted-foreground: 215 16% 65%;

    --accent: 185 84% 54%;
    --accent-foreground: 215 28% 9%;

    --success: 151 80% 50%;
    --success-foreground: 215 28% 9%;

    --warning: 38 92% 60%;
    --warning-foreground: 215 28% 9%;

    --destructive: 0 84% 70%;
    --destructive-foreground: 215 28% 9%;

    --border: 215 28% 20%;
    --input: 215 28% 20%;
    --ring: 194 74% 55%;

    /* Dark gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--secondary)));
    --gradient-card: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted)));

    /* Dark shadows */
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-elevated: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-floating: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-glow: 0 0 20px hsl(var(--primary) / 0.4);
  }
}

/* Custom component styles */
@layer components {
  .gradient-primary {
    background: var(--gradient-primary);
  }
  
  .gradient-accent {
    background: var(--gradient-accent);
  }
  
  .gradient-subtle {
    background: var(--gradient-subtle);
  }

  .gradient-card {
    background: var(--gradient-card);
  }

  .shadow-card {
    box-shadow: var(--shadow-card);
  }

  .shadow-elevated {
    box-shadow: var(--shadow-elevated);
  }

  .shadow-floating {
    box-shadow: var(--shadow-floating);
  }

  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  .transition-smooth {
    transition: var(--transition-smooth);
  }

  .transition-fast {
    transition: var(--transition-fast);
  }

  /* Business card animations */
  .business-card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
  }

  .business-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
  }

  /* Button styles using color palette */
  .btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: var(--radius);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-card);
  }

  .btn-primary:hover {
    background: hsl(var(--primary-glow));
    box-shadow: var(--shadow-elevated);
  }

  .btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    transition: var(--transition-fast);
  }

  .btn-secondary:hover {
    background: hsl(var(--muted));
  }

  .btn-accent {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border: none;
    border-radius: var(--radius);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-card);
  }

  .btn-accent:hover {
    box-shadow: var(--shadow-glow);
  }

  .btn-success {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
    border: none;
    border-radius: var(--radius);
    transition: var(--transition-fast);
  }

  .btn-warning {
    background: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
    border: none;
    border-radius: var(--radius);
    transition: var(--transition-fast);
  }

  /* MUI-style Input fields */
  .input-field {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    padding: 16.5px 14px;
    font-size: 1rem;
    line-height: 1.4375;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    width: 100%;
    display: block;
  }

  .input-field:hover {
    border-color: rgba(0, 0, 0, 0.87);
  }

  .input-field:focus {
    outline: none;
    border-color: hsl(var(--primary));
    border-width: 2px;
    padding: 15.5px 13px;
  }

  .input-field::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  /* Card styles */
  .card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  /* Progress bar styles */
  .progress-glow {
    box-shadow: 0 0 10px hsl(var(--primary) / 0.5);
  }

  /* Data badge styles */
  .badge-success {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .badge-warning {
    background: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .badge-accent {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .badge-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .badge-danger {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    font-weight: 500;
  }

  /* Enhanced Form Styling */
  .form-section {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--gradient-subtle);
    border: 1px solid hsl(var(--border));
    transition: var(--transition-smooth);
    position: relative;
  }

  .form-section:hover {
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
  }

  .form-header {
    margin-bottom: 1rem;
  }

  .form-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    cursor: pointer;
  }

  .label-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
  }

  .label-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    display: block;
    margin-bottom: 0.25rem;
  }

  .label-subtitle {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    display: block;
    font-weight: 400;
  }

  .input-wrapper {
    position: relative;
    margin-bottom: 1rem;
  }

  .input-field-enhanced {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    padding: 16.5px 14px;
    font-size: 1rem;
    line-height: 1.4375;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
  }

  .input-field-enhanced:hover {
    border-color: rgba(0, 0, 0, 0.87);
  }

  .input-field-enhanced:focus {
    outline: none;
    border-color: hsl(var(--primary));
    border-width: 2px;
    padding: 15.5px 13px;
  }

  .input-field-enhanced::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  .input-focus-border {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 2px solid transparent;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 1;
  }

  .input-field-enhanced:focus + .input-focus-border {
    opacity: 0.2;
  }

  .form-hint {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: hsl(var(--muted) / 0.5);
    border-radius: calc(var(--radius) * 0.75);
    border-left: 3px solid hsl(var(--accent));
  }

  /* Advanced Options Section */
  .advanced-section {
    margin-top: 2rem;
    padding-top: 2rem;
  }

  .section-divider {
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 1px;
    margin: 2rem 0;
    opacity: 0.3;
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .section-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: hsl(var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: var(--shadow-card);
  }

  .section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0 0 0.25rem 0;
  }

  .section-subtitle {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
  }

  .status-badge {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: hsl(var(--success) / 0.1);
    color: hsl(var(--success));
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid hsl(var(--success) / 0.2);
  }

  /* Option Cards */
  .option-card {
    background: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
  }

  .option-card:hover {
    border-color: hsl(var(--primary) / 0.3);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
  }

  .option-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .option-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: hsl(var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: var(--shadow-card);
  }

  .option-title {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
  }

  .option-hint {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: hsl(var(--muted) / 0.3);
    border-radius: calc(var(--radius) * 0.5);
  }

  /* MUI-style Select Fields */
  .select-field {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    padding: 16.5px 14px;
    font-size: 1rem;
    line-height: 1.4375;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.54)' 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 12px center;
    background-size: 20px;
    padding-right: 40px;
    appearance: none;
  }

  .select-field:hover {
    border-color: rgba(0, 0, 0, 0.87);
  }

  .select-field:focus {
    outline: none;
    border-color: hsl(var(--primary));
    border-width: 2px;
    padding: 15.5px 13px;
    padding-right: 39px;
  }

  /* Enhanced Search Button */
  .search-button {
    position: relative;
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    border: none;
    border-radius: var(--radius);
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
    min-width: 250px;
  }

  .search-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-floating), var(--shadow-glow);
  }

  .search-button:active {
    transform: translateY(-1px) scale(0.98);
  }

  .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
  }

  .button-icon {
    font-size: 1.25rem;
  }

  .button-text {
    font-weight: 600;
    letter-spacing: 0.025em;
  }

  .button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, hsl(var(--primary-foreground) / 0.1), transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }

  .search-button:hover .button-glow {
    transform: translateX(100%);
  }

  .search-note {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
}

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

  body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: system-ui, -apple-system, sans-serif;
  }
}