// Import variables
@import './variables.scss';

// Import component overrides
@import './components/button.scss';
@import './components/input.scss';
@import './components/dialog.scss';
@import './components/dropdown.scss';

:root {
  // Colors
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --success-color: #{$success-color};
  --info-color: #{$info-color};
  --warning-color: #{$warning-color};
  --help-color: #{$help-color};
  --danger-color: #{$danger-color};
  
  // Surface colors
  --surface-0: #{$surface-0};
  --surface-50: #{$surface-50};
  --surface-100: #{$surface-100};
  --surface-200: #{$surface-200};
  --surface-300: #{$surface-300};
  --surface-400: #{$surface-400};
  --surface-500: #{$surface-500};
  --surface-600: #{$surface-600};
  --surface-700: #{$surface-700};
  --surface-800: #{$surface-800};
  --surface-900: #{$surface-900};
  
  // Typography
  --font-family: #{$font-family};
  --font-size: #{$font-size};
  --text-color: #{$surface-900};
  --text-color-secondary: #{$surface-600};
  
  // Border radius
  --border-radius: #{$border-radius};
  
  // Transition
  --transition-duration: #{$transition-duration};
  
  // Focus
  --focus-ring: 0 0 0 #{$focus-ring-width} #{$focus-ring-color};
  
  // Component specific
  --surface-ground: #{$surface-100};
  --surface-section: #{$surface-0};
  --surface-card: #{$surface-0};
  --surface-overlay: #{$surface-0};
  --surface-border: #{$surface-200};
  
  --card-shadow: #{$shadow};
  --highlight-bg: #{$surface-100};
  --highlight-text-color: #{$primary-color};
}

// Global styles
body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--surface-ground);
  margin: 0;
  padding: 0;
}

// PrimeVue global overrides
.p-component {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.p-component:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

// Form components common styles
.p-float-label {
  display: block;
  position: relative;
  margin-bottom: 1rem;
  
  label {
    position: absolute;
    top: 50%;
    left: $spacing-3;
    transform-origin: left top;
    transform: translateY(-50%);
    transition: all $transition-duration $transition-ease;
    color: var(--text-color-secondary);
    pointer-events: none;
  }
  
  input:focus ~ label,
  input.p-filled ~ label,
  textarea:focus ~ label,
  textarea.p-filled ~ label,
  .p-inputwrapper-focus ~ label,
  .p-inputwrapper-filled ~ label {
    top: 0.25rem;
    font-size: 0.75rem;
    transform: translateY(0);
  }
}