@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --es-green-dark:     #1a3d2b;
  --es-green:          #2d6a4f;
  --es-green-mid:      #52b788;
  --es-green-light:    #d8f3dc;
  --es-beige-dark:     #8c7851;
  --es-beige:          #c9a96e;
  --es-beige-light:    #f5f0e8;
  --es-beige-lighter:  #faf7f2;
  --es-border:         #e2ddd4;
}

@layer components {
  .bg-es-green-dark    { background-color: var(--es-green-dark) !important; }
  .bg-es-green         { background-color: var(--es-green) !important; }
  .bg-es-green-mid     { background-color: var(--es-green-mid) !important; }
  .bg-es-green-light   { background-color: var(--es-green-light) !important; }
  .bg-es-beige-dark    { background-color: var(--es-beige-dark) !important; }
  .bg-es-beige         { background-color: var(--es-beige) !important; }
  .bg-es-beige-light   { background-color: var(--es-beige-light) !important; }
  .bg-es-beige-lighter { background-color: var(--es-beige-lighter) !important; }

  .text-es-green-dark  { color: var(--es-green-dark) !important; }
  .text-es-green       { color: var(--es-green) !important; }
  .text-es-green-mid   { color: var(--es-green-mid) !important; }
  .text-es-green-light { color: var(--es-green-light) !important; }
  .text-es-beige-dark  { color: var(--es-beige-dark) !important; }
  .text-es-beige       { color: var(--es-beige) !important; }

  .border-es-border     { border-color: var(--es-border) !important; }
  .border-es-green-mid  { border-color: var(--es-green-mid) !important; }
  .border-es-green      { border-color: var(--es-green) !important; }

  .fill-es-green-dark  { fill: var(--es-green-dark) !important; }
  .fill-es-green       { fill: var(--es-green) !important; }
  .fill-es-beige-dark  { fill: var(--es-beige-dark) !important; }

  .hover\:bg-es-green:hover       { background-color: var(--es-green) !important; }
  .hover\:bg-es-green-dark:hover  { background-color: var(--es-green-dark) !important; }
  .hover\:bg-es-green-light:hover { background-color: var(--es-green-light) !important; }
  .hover\:text-es-green:hover     { color: var(--es-green) !important; }
  .hover\:text-es-green-dark:hover{ color: var(--es-green-dark) !important; }
  .hover\:border-es-green-mid:hover { border-color: var(--es-green-mid) !important; }

  .focus\:border-es-green-mid:focus { border-color: var(--es-green-mid) !important; }
  .focus\:ring-es-green-light:focus { --tw-ring-color: var(--es-green-light) !important; }

  .font-sans { font-family: 'Inter', system-ui, sans-serif; }
}