/* Color palette extracted from royle:dev logo */

:root {
  /* Original logo colors */
  --royle-green: #467158;
  --royle-brown: #886664;

  /* Lighter design colors */
  --royle-green-light: #7CB069;
  --royle-green-lighter: #A3D490;
  --royle-green-lightest: #C9E8B7;

  --royle-brown-light: #B8A298;
  --royle-brown-lighter: #D4C6BF;
  --royle-brown-lightest: #F0EAE6;
  --royle-brown-header: #886664;

  /* Neutral variants */
  --royle-gray-50: #F9FAFB;
  --royle-gray-100: #F3F4F6;
  --royle-gray-200: #E5E7EB;
  --royle-gray-300: #D1D5DB;
  --royle-gray-400: #9CA3AF;
  --royle-gray-500: #6B7280;
  --royle-gray-600: #4B5563;
  --royle-gray-700: #374151;
  --royle-gray-800: #1F2937;
  --royle-gray-900: #111827;
}

/* Light theme utility classes */
.bg-royle-green { background-color: var(--royle-green); }
.bg-royle-green-light { background-color: var(--royle-green-light); }
.bg-royle-green-lighter { background-color: var(--royle-green-lighter); }
.bg-royle-green-lightest { background-color: var(--royle-green-lightest); }

.text-royle-green { color: var(--royle-green); }
.text-royle-green-light { color: var(--royle-green-light); }
.text-royle-brown { color: var(--royle-brown); }
.text-royle-brown-light { color: var(--royle-brown-light); }

.border-royle-green { border-color: var(--royle-green); }
.border-royle-green-light { border-color: var(--royle-green-light); }