:root {
 --foreground: #344054;
    --background: #f7f9fa;
    --error: var(--color-red-500);
    --button-bg: "transparent";
    --button-border: var(--color-gray-200);
    --button-hover: var(--color-yellow-600);
    --button-rounded: 4px;
    --input-bg: "transparent";
    --input-border: var(--color-gray-200);
    --input-outline: var(--color-yellow-600);
    --input-rounded: 4px;
    --input-select-active: var(--color-yellow-600);
    --input-select-hover: var(--color-gray-50);
    --input-multi-select: var(--color-gray-200);
    --input-multi-select-hover: var(--color-red-500);
    --overlay-bg: var(--color-white);
    --overlay-border: var(--color-gray-200);
    --overlay-drop-shadow: 0 0px 0px #00000026;
    --overlay-rounded: 16px;
    --nav-bar-text: var(--foreground);
    --nav-bar-text-active: var(--color-yellow-600);
    --nav-bar-text-hover: var(--color-yellow-700);
    --nav-bar-bg: var(--color-white);
    --nav-bar-border: var(--color-gray-200);
    --nav-bar-drop-shadow: 0 0px 0px #00000026;
    --header-bg: var(--color-white);
    --header-border: var(--color-gray-200);
    --header-tab-text: var(--foreground);
    --header-tab-text-active: var(--color-yellow-600);
    --header-tab-text-hover: var(--color-yellow-700);
    --header-tab-border: var(--color-yellow-600);
    --table-bg: var(--color-white);
    --table-border: var(--color-gray-200);
    --table-divider: var(--background);
    --table-drop-shadow: 0 0px 0px #00000026;
    --table-rounded: 16px;
    --table-header-text: var(--color-gray-500);
    --table-header-bg: transparent;
    --table-header-border: var(--background);
    --table-body-text: var(--foreground);
    --table-body-bg: "transparent";
    --table-footer-text: var(--color-gray-500);
    --table-footer-bg: "transparent";
    --table-footer-hover: var(--color-yellow-600);
    --table-actions: var(--color-gray-500);
    --table-actions-hover: var(--color-yellow-600);
    --bar-chart-font: var(--font-outfit);
    --bar-chart-text: var(--foreground);
    --pie-chart-font: var(--font-outfit);
    --pie-chart-text: var(--foreground);
    --line-chart-font: var(--font-outfit);
    --line-chart-text: var(--foreground);
    --line-chart-axis: #344054cc;
    --line-chart-grid: #3440541a;
    --radial-chart-font: var(--font-outfit);
    --radial-chart-text: var(--foreground);
    --radial-chart-track: var(--background);
    --home-text: #e4e7ec;
    --home-bg-1: #1d1d1d;
    --home-bg-2: #947f5c;
    --home-button: #d3b583;
    --home-color-1: #4682b4;
    --home-color-2: #b87333;
    --home-color-3: var(--color-gray-400);
    --home-color-4: var(--color-gray-400);
    --status-draft-text: var(--color-red-700);
    --status-draft-bg: var(--color-red-50);
    --status-review-text: var(--color-red-700);
    --status-review-bg: var(--color-red-50);
    --status-pending-text: var(--color-yellow-700);
    --status-pending-bg: var(--color-yellow-50);
    --status-approved-text: var(--color-yellow-700);
    --status-approved-bg: var(--color-yellow-50);
    --status-paid-text: var(--color-green-700);
    --status-paid-bg: var(--color-green-50);
    --notification-text: var(--foreground);
    --notification-bg: var(--color-white);
    --notification-border: var(--color-gray-200);
    --notification-hover: var(--color-yellow-600);
    --notification-drop-shadow: 0 1px 1px #00000026;
    --notification-rounded: 8px
}
body {
  background-color: var(--home-bg-1);
  color: var(--home-text);
}

/* Form fields */
.input-field {
  padding: 8px 12px;
  border: 1px solid var(--dark-grey-l-3);
  border-radius: 4px;
  background: #111;
  color: var(--home-text);
  font-size: 15px;
}

.input-field:focus {
  outline: none;
  border-color: var(--home-button);
}

/* Submit button */
.btn-submit {
  padding: 12px 24px;
  background: var(--home-button);
  color: var(--home-bg-1);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.btn-submit:hover {
  opacity: 0.8;
}

.coming-soon-section {
  padding: 100px 40px;
}

.contact-info > div {
  position: relative;
}


.section-container {
  max-width: 1280px;
 margin: 0 auto;
padding: 0 16px;
}
.bg-gradient-custom {
  background: linear-gradient(to bottom, #1d1d1d 0%, #947f5c 100%);
}