/* CSS Custom Properties (Variables) */
:root {
  /* Primary Colors */
  --color-orange-base: #ff5e00;
  --color-orange-deep: #f65413;
  --color-orange-active: #e54e00;
  --color-orange-light: #F6E6DC;
  --color-orange-bg: #FEF6F2;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-base: #F5F5F5;
  --color-gray-light: #f8f8f8;
  --color-gray-light-2: #999999;
  --color-gray-light-3: #EEEEEE;
  --color-gray-light-4: #DDDDDD;
  --color-gray-light-5: #E6E6E6;
  --color-gray-light-6: #f7f7f7;
  --color-gray-light-7: #f1f1f1;
  --color-gray-button: #ededed;
  --color-gray-medium: #e2e2e2;
  --color-gray-text: #666666;
  --color-gray-disabled: #bbbbbb;
  --color-gray-dark: #333333;
  --color-gray-darker: #1a1a1a;

  /* TextField Colors */
  --color-future-orange: #FF6B35;
  --color-future-gray: #6B7280;
  --color-future-light-gray: #9CA3AF;
  --color-future-dark: #1F2937;
  --color-border-default: #D1D5DB;
  --color-border-focus: var(--color-future-orange);
  --color-bg-disabled: #F3F4F6;
  --color-bg-label-normal: #F3F4F6;
  --color-bg-label-active: var(--color-future-orange);
  --color-bg-label-disabled: #F9FAFB;

  /* Divider Colors */
  --color-divider-black: #1F2937;
  --color-divider-grey: #E5E7EB;
  --color-divider-bg: #F9FAFB;

  /* Eye TextField Colors */
  --color-status-error: #EF4444;
  --color-status-complete: var(--color-future-light-gray);

  /* TextArea Colors */
  --color-textarea-bg: #F9FAFB;

  /* Transparent/Special */
  --color-transparent: transparent;
  --color-orange-border: rgba(255, 94, 0, 0.4);

  --color-dark-yellow: #FFA600;
}